15-flutter Scaffold详解

Scaffold

是一个实现基本的material design 的布局结构

appBar	显示在界面顶部的一个 AppBar
body	当前界面所显示的主要内容 Widget
floatingActionButton	Material 设计中所定义的 FAB，界面的主要功能按钮
persistentFooterButtons	固定在下方显示的按钮，比如对话框下方的确定、取消按钮
drawer	抽屉菜单控件
backgroundColor	内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值
bottomNavigationBar	显示在页面底部的导航栏
resizeToAvoidBottomPadding	控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

1 AppBar

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: myAppBar(),
        body: Text("data"),
      ),
      );
  }
}

// 创建一个AppBar
AppBar myAppBar(){

    return new AppBar(
        //标题
        title: new Text("自定义标题"),
        // 标题居中
        centerTitle: true,
        //按钮
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.favorite),
            onPressed: (){
              print("点击了小心心阿牛");
            },
            // 长按进行提示文字
            tooltip: '这是干什么操作的',
          ),
          new IconButton(
            icon: new Icon(Icons.sentiment_dissatisfied),
            onPressed: (){
              print("第二个按钮");
            },
            // 长按进行提示文字
            tooltip: '这是干什么操作的',
          )
        ],
    );
}

2 Drawer 抽屉

Drawer myDrawer(BuildContext context){

    return new Drawer(
      child: ListView(
        padding: EdgeInsets.all(5),
        children: <Widget>[
          // 抽屉头部
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.lightBlueAccent,
            ),
            child: Center(
              child: SizedBox(
                width: 80,
                height: 80,
                child: CircleAvatar(
                  child: Icon(Icons.face),
                ),
              ),
            ),
          ),
          ListTile(
            title: Text("第一行"),
            leading: new CircleAvatar(
              child: new Icon(Icons.face),
            ),
            onTap: (){
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text("第二行"),
            leading: new CircleAvatar(
              child: new Icon(Icons.fastfood),
            ),
            onTap: (){
              Navigator.pop(context);
            },
          ),
        ],
      ),



    );

 }

3 悬浮的按钮

  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: myAppBar(),
        body: Text("data"),
        drawer: myDrawer(context),
        // 悬浮的按钮 在右下角
        floatingActionButton: new FloatingActionButton(
          tooltip: 'Add', // used by assistive technologies
          child: new Icon(Icons.add),
          onPressed: null,
        ),
  		// 悬浮按钮的位置 中间 右边 左边，默认是右边
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
      
      );
  }
}

4 底部的导航栏 bottomNavigationBar

class _BottomBarState extends State{

    int _currentIndex = 1;

    // 点击项目的回调
    void _onItemTapped(int index) {
      if(mounted) {
        setState(() {
          _currentIndex = index;
        });
      }
    }

    @override
    Widget build(BuildContext context) {
      return BottomNavigationBar(
        // BottomNavigationBarType 中定义的类型，有 fixed 和 shifting 两种类型
        type: BottomNavigationBarType.fixed, 
        // BottomNavigationBarItem 中 icon 的大小
        iconSize: 24.0, 
        // 当前所高亮的按钮index
        currentIndex: _currentIndex, 
        // 点击里面的按钮的回调函数，参数为当前点击的按钮 index
        onTap: _onItemTapped, 
        // 选中时候
        fixedColor:  Colors.blue, 
        items: <BottomNavigationBarItem> [
          BottomNavigationBarItem(
              title:  Text("商场"), icon:  Icon(Icons.local_grocery_store)),
          BottomNavigationBarItem(
              title:  Text("航班"), icon:  Icon(Icons.local_airport)),
          BottomNavigationBarItem(
              title:  Text("旅行"), icon:  Icon(Icons.card_travel)),
          BottomNavigationBarItem(
              title:  Text("我的"), icon:  Icon(Icons.apps)),

        ],
      );
    }
}