Flutter (九) Material Design风格组件（一）

Material Design App结构和导航组件

一、MaterialApp(应用组件)

• title:标题
• theme:主题
• color:应用的主题颜色
• home:定义当前页面打开时所显示的界面
• routes:页面跳转规则，路由
• initialRoute:初始化路由
• onGenerateRoute:路由回调

1.设置主页

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'MaterialApp 示例1',
        color: Colors.blue,
        home:new MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget{
  @override
  _MyHomePageState createState()=> new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('MaterialApp 示例2'),
      ),
      body: Center(child: Text("主页"),),
    );
  }
}

2.路由处理

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'MaterialApp 示例1',
        color: Colors.blue,
        home:new MyHomePage(),
        routes: {
          "/first":(BuildContext context) => FirstPage(),
          "/second":(BuildContext context) => SecondPage(),
        },
        initialRoute: "/first",
    );
  }
}

//这是一个可改变的weight
class MyHomePage extends StatefulWidget{
  @override
  _MyHomePageState createState()=>new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
  @override   
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("MaterialApp 示例 home"),
      ),
      body: Center(child: Text("MaterialApp 示例 home",style:TextStyle(fontSize: 20.0))),
    );
  }
}

//第一个路由页面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("这是第一页"),
      ),
      body: Center(
        child:RaisedButton( 
          onPressed: (){
            Navigator.pushNamed(context, '/second');
          },
          child: Text("这是第一页",style: TextStyle(fontSize: 20.0,color: Colors.red),),)
       

        ),
    );
  }
}


//第二个路由页面
class SecondPage extends StatelessWidget{
  @override 
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("这是第二页"),
      ),
      body:Center(
        child: RaisedButton(
          onPressed: (){Navigator.pushNamed(context, "/first");},
          child: Text('这是第二页',style:TextStyle(fontSize: 30.0))),
      )
    );
  }
}

二、Scaffold(脚手架组件)

• appBar:显示在顶部的一个AppBar
  • leading:标题前面的组件
  • actions:一个Widget列表，顶部菜单列表
• body:当前显示的主要内容
• drawer:侧边栏组件
• bottomNavigationBar:显示在底部的导航栏按钮框
  • currentIndex:当前索引
  • fixedColor:选中按钮颜色
  • onTap: 按按钮的回调函数
  • items:底部导航条按钮集
  • iconSize:图集大小
• floatingActionButton:功能性按钮
• resizeToAviodBottomPadding:控制界内内容是否重新布局避免底部被覆盖

1.appBar

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialApp 示例1',
      color: Colors.blue,
      home: new MyHomePage(),
      theme: new ThemeData(primaryColor: Colors.green),
      routes: {
        "/first": (BuildContext context) => FirstPage(),
        "/second": (BuildContext context) => SecondPage(),
      },
      initialRoute: "/first",
    );
  }
}

//这是一个可改变的weight
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("MaterialApp 示例 home"),
      ),
      body: Center(
          child: Text("MaterialApp 示例 home", style: TextStyle(fontSize: 20.0))),
    );
  }
}

//第一个路由页面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("这是第一页"),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search),onPressed: (){},tooltip: "搜索",),
          IconButton(icon:Icon(Icons.add),onPressed: (){},tooltip: "添加",)
        ],
        leading: IconButton(icon: Icon(Icons.search),onPressed: (){},tooltip: "搜索",),
      ),
      body: Center(
          child: RaisedButton(
        onPressed: () {
          Navigator.pushNamed(context, '/second');
        },
        child: Text(
          "这是第一页",
          style: TextStyle(fontSize: 20.0, color: Colors.red),
        ),
      )),

      bottomNavigationBar: BottomAppBar(
        color: Colors.green,
        child: Container(
          height: 50.0,
        ),
      ),

      //添加FAB
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        tooltip: "增加",
      ),
      //FAB 居中
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

//第二个路由页面
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text("这是第二页"),
        ),
        body: Center(
          child: RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/first");
              },
              child: Text('这是第二页', style: TextStyle(fontSize: 30.0))),
        ));
  }
}

2.BottomNavigationBar

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        body: MyHomePage(),
      )
    );
  }
}

class MyHomePage extends StatefulWidget{
  MyHomePage({Key key}):super(key:key);
  @override 
  _MyHomePageState createState()=>_MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
  int _selectedIndex = 1;
  final _widgetOptions = [
    Text('Index 0 : 信息'),
    Text('Index 1 : 通讯录'),
    Text('Index 2 : 发现')
  ];
  @override 
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar 示例'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex), //第几个元素
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.chat),title: Text('信息')),
          BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text('通讯录')),
          BottomNavigationBarItem(icon:Icon(Icons.account_circle),title: Text('发现'))
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.deepOrange,
        onTap: _onItemTapped,
      ),
    );
  }
  void _onItemTapped(int index){
    setState(() {
     _selectedIndex = index; 
    });
  }
}

3.TabBar

import 'package:flutter/material.dart';

class TabBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      //添加DefaultTabController关联TabBar及TabBarView
      home: new DefaultTabController(
          length: items.length,
          child: new Scaffold(
            appBar: new AppBar(
                title: const Text('TabBar 选卡片'),
                bottom: new TabBar(
                  isScrollable: true, //设置为滚动
                  tabs: items.map((ItemView item) {
                    //迭代添加选项卡
                    return new Tab(
                      text: item.title,
                      icon: new Icon(item.icon),
                    );
                  }).toList(),
                )),
            //选项卡视图
            body: new TabBarView(
              children: items.map((ItemView item) {
                return new Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new SelectedView(item: item),
                );
              }).toList(),
            ),
          )),
    );
  }
}

class ItemView {
  final String title;
  final IconData icon;
  const ItemView({this.title, this.icon}); //构造方法
}

const List<ItemView> items = const <ItemView>[
  const ItemView(title: "自驾", icon: Icons.directions_car),
  const ItemView(title: "自行车", icon: Icons.directions_bike),
  const ItemView(title: "轮船", icon: Icons.directions_boat),
  const ItemView(title: "公交车", icon: Icons.directions_bus),
  const ItemView(title: "火车", icon: Icons.directions_railway),
  const ItemView(title: "步行", icon: Icons.directions_walk),

  // const ItemView(title: '自驾1',icon：Icons.directions_car),
  // const ItemView(title: '自驾2',icon：Icons.directions_car),
  // const ItemView(title: '自驾3',icon：Icons.directions_car),
  // const ItemView(title: '自驾4',icon：Icons.directions_car),
  // const ItemView(title: '自驾5',icon：Icons.directions_car),
  // const ItemView(title: '自驾6',icon：Icons.directions_car),
  // const ItemView(title: '自驾7',icon：Icons.directions_car),
];

class SelectedView extends StatelessWidget {
  const SelectedView({Key key, this.item}) : super(key: key);
  final ItemView item;
  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return new Card(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new Icon(item.icon, size: 128, color: textStyle.color),
          new Text(item.title, style: textStyle)
        ],
      ),
    );
  }
}

void main() {
  runApp(new TabBarSample());
}

、

4.Drawer

import 'package:flutter/material.dart';

void main() =>
    runApp(new MaterialApp(title: 'Drawer 抽屉组件示例1', home: new LayoutDemo()));

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Drawer 抽屉组件示例2'),
      ),
      drawer: Drawer(
          child: ListView(children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: new Text("测试"),
          accountEmail: new Text("ceshi@163.com"),
          currentAccountPicture: new CircleAvatar(
            backgroundImage: new AssetImage('images/1.jpg'),
          ),
        ),
        ListTile(
            leading: new CircleAvatar(child: Icon(Icons.color_lens)),
            title: Text("个性装扮")),
        ListTile(
            leading: new CircleAvatar(child: Icon(Icons.color_lens)),
            title: Text("我的相册")),
        ListTile(
            leading: new CircleAvatar(child: Icon(Icons.color_lens)),
            title: Text("免流量权限"))
      ])),
    );
  }
}