Flutter控件之Scaffold(包含基本布局結構)

Scaffold 實現了基本的布局結構包含titlebar body 側滑 懸浮按鈕 bottomNavigationBar,基本用到的都會涵蓋。

下面是一個例子，包含

1. PageView+底部導航欄的聯動

2.點擊事件

3.標題欄AppBar 菜單項 PopupMenuButton

4.側滑

5.懸浮按鈕

代碼如下：

 

腳手架 Scaffold

import 'package:flutter/material.dart';

class LearnScaffold extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new _LearnScaffold();
  }
}
class _LearnScaffold extends State<LearnScaffold>{

  //標題欄
  AppBar getAppBar(){
    return new AppBar(
      backgroundColor: Colors.green,//設置標題欄的背景顏色
      title: new Title(
        child:new Text(
          '這是一個標題',
          style: new TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
        color: Colors.white,//設置標題欄文字的顏色(new title的時候color不能為null不然會報錯一般可以不用new title 直接new text,不過最終的文字里面還是以里面new text的style樣式文字顏色為准)
      ),
      centerTitle: true,//設置標題居中
      elevation: 10.0,//設置標題欄下面陰影的高度
      leading: new Builder(
          builder: (BuildContext context){
            return new GestureDetector(//設置事件
              child: new Icon(//設置左邊的圖標
                Icons.account_circle,//設置圖標內容
                color: Colors.white,//設置圖標的顏色
              ),
              onTap:(){
                Scaffold.of(context).showSnackBar(
                    new SnackBar(content: new Text('點擊'))
                );
              },
              onLongPress: (){
                Scaffold.of(context).showSnackBar(
                    new SnackBar(content: new Text('長按'))
                );
              },
              onDoubleTap: (){
                Scaffold.of(context).showSnackBar(
                    new SnackBar(content: new Text('雙擊'))
                );
              },
            );
          }
      ),
      brightness:Brightness.light,//設置狀態欄的字體顏色(白色/黑色)
      primary: true,//是否設置內容避開狀態欄
//        flexibleSpace: ,//伸縮控件
//        automaticallyImplyLeading: true,

      //設置顯示在右邊的控件
      actions: <Widget>[
        new Padding(
          child: new Icon(
            Icons.add,
            color: Colors.white
          ),
          padding: EdgeInsets.all(10.0),
        ),
        new Padding(
          child: new Icon(
              Icons.account_box,
              color: Colors.white
          ),
          padding: EdgeInsets.all(10.0),
        ),
        new PopupMenuButton(
          itemBuilder: (BuildContext context){
            return <PopupMenuItem<String>>[
              PopupMenuItem(
                child: new Text("menu item 1"),
                value: "第一個",
              ),
              PopupMenuItem(
                child: new Text("menu item 2"),
                value: "第二個",
              ),
            ];
          },
          icon: new Icon(
              Icons.ac_unit,
              color: Colors.white
          ),
          onSelected: (String selected){
            print("選擇的：" + selected);
          },
        ),
      ],
      bottom:PreferredSize(//設置標題下面的view
        child: new Container(
          height: 50.0,
          child: new Center(
            child: new Text(
              '顯示在title下面',
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.red,
          ),
        ),
        preferredSize: Size.fromHeight(50.0),
      ),
    );
  }

  int _currentIndex = 1;//記錄當前選擇的PageView與Tab的index
  List<Widget> _pages;//pageView的item
  PageController _pageController;//pageView的控制器

  @override
  void initState() {
    super.initState();
    print("初始化數據");

    //PageView的控制
    _pageController = new PageController(
        initialPage: _currentIndex //初始化選中的頁面位置
    );

    _pages = [
      Container(color: Colors.red),
      Container(color: Colors.greenAccent),
      Container(color: Colors.yellow),
    ];
  }

  @override
  Widget build(BuildContext context) {
    print("調用setState()方法后 就會調用build()方法，重繪");
    return new Scaffold(//實現了基本的布局結構包含titlebar  body  drawer  懸浮按鈕 bottomNavigationBar,基本用到的都會涵蓋
        appBar: getAppBar(),

        //中間部分
        body: PageView.builder(
          itemBuilder: (BuildContext context, int index){
            return _pages[index];
          },
          controller: _pageController,
          itemCount: _pages.length,//PageView的總個數
          onPageChanged: (int index){
            //PageView的回調
            print("當前顯示的是第$index頁");
            //setState()  更新數據，將回調build()方法，重新繪制頁面
            setState(() {
              _currentIndex = index;
            });
          },
        ),

        //底部固定的widget
        persistentFooterButtons: <Widget>[
          new Icon(Icons.add_shopping_cart),
          new Icon(Icons.ac_unit),
          new Icon(Icons.print),
          new Icon(Icons.accessibility),
          new Icon(Icons.keyboard),
          new Icon(Icons.add_shopping_cart),
          new Icon(Icons.ac_unit),
          new Icon(Icons.print),
          new Icon(Icons.accessibility),
        ],

        //側邊欄
        drawer: new Drawer(
          child:new Image.network(
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2755523882,2215399258&fm=200&gp=0.jpg",
            fit: BoxFit.fill,
          ),
        ),

        //底部導航欄
        bottomNavigationBar: new BottomNavigationBar(
          currentIndex: _currentIndex,//默認選中的位置
          fixedColor: Colors.green,//選中的顏色
          onTap: (int index){//點擊的bar
            //改變PageView顯示的頁面，將回調PageView的onPageChanged() 方法
            _pageController.animateToPage(
              index,//切換到的頁面index
              duration: Duration(milliseconds: 200),//200毫秒
              curve: Curves.bounceOut,//動畫
            );
          },
          items:<BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              icon:new Icon(
                Icons.airplay,
              ),
              activeIcon: new Icon(//選中顯示的icon
                Icons.airport_shuttle,
              ),
              title: new Text(
                '主頁',
              ),
            ),
            new BottomNavigationBarItem(
              icon:new Icon(
                Icons.add,
              ),
              title: new Text(
                '加量',
              ),
            ),
            new BottomNavigationBarItem(
              icon:new Icon(
                Icons.account_box,
              ),
              title: new Text(
                '個人中心',
              ),
            ),
          ] ,
        ),

        //懸浮按鈕
        floatingActionButton: new Builder(
            builder:(BuildContext context){
              return new FloatingActionButton(
                tooltip: '這里是長按提示的文字',
                backgroundColor: Colors.red,//設置懸浮按鈕的背景顏色
//             heroTag: ,//頁面切換動畫的tag
                elevation: 10.0,//陰影大小
//             highlightElevation: 20.0,//設置高亮的陰影
                mini: false,//設置是否為小圖標
                child: new Icon(Icons.access_alarm),//設置中間的小圖標
                //點擊事件
                onPressed: (){
                  Scaffold.of(context).showSnackBar(
                    new SnackBar(
                      content: new Text('看你出來不'),//設置要提示的文字
                      backgroundColor: Colors.red,//設置背景顏色
                      duration:new Duration(//設置顯示的時間
                        days: 0,
                        hours: 0,
                        minutes: 1,//1分鍾
                        milliseconds: 0,
                        microseconds: 0,
                      ),
                      //animation: ,//設置顯示的時候的動畫
                      action: new SnackBarAction(
                        label: "snackBar右邊的按鈕",//按鈕顯示的內容
                        onPressed:(){//點擊之后觸發的另一個事件
                          print('點擊了snackBar右邊的按鈕');
                        },
                      ),
                    ),
                  );
                },
              );
            })
    );
  }
}

效果圖：