Flutter(八)基礎控件-Scaffold

感君一回顧，思君朝與暮。

本文部分圖片和文字介紹轉載于 http://www.itdecent.cn/p/a0fcb755a7b8

Scaffold

  • Scaffold 實現(xiàn)了基本的 Material 布局。只要是在 Material 中定義了的單個界面顯示的布局控件元素，都可以使用 Scaffold 來繪制。
    提供展示抽屜（drawers，比如：左邊欄）、通知（snack bars） 以及 底部按鈕（bottom sheets）。
    我們可以將 Scaffold 理解為一個布局的容器?？梢栽谶@個容器中繪制我們的用戶界面。
  Scaffold({

  Key key,

  this.appBar,/// 一個appBar  Widget  
  this.body,///  頁面的內(nèi)容,widget  通常為 Container
  this.floatingActionButton,///  android  Material design 設計中的 button  通常懸浮在屏幕右下角
  this.floatingActionButtonLocation,/// button 的位置
  this.floatingActionButtonAnimator,///button 的動畫
  this.persistentFooterButtons,///  存在于底部  navigationbar與 body之間的一個按鈕list,  Widget[]
  //在源碼中看到了手動打開抽屜的方法   Scaffold.of(context).openDrawer();
  this.drawer,///抽屜匣      側滑菜單,類似手機qq的側滑菜單  默認隱藏    左邊     
  this.endDrawer,///抽屜匣      側滑菜單,類似手機qq的側滑菜單  默認隱藏    右邊
  this.bottomNavigationBar,///底部切換菜單,在android上通常與viewpage一起使用的切換按鈕

  ///bottomSheet 類似 CoordinatorLayout 中的 使用了 BottomSheetBehavior  的布局,暫時沒發(fā)現(xiàn)有手動隱藏的方法
  ///想要手動隱藏,可以自己創(chuàng)建  showBottomSheet  或者  showModalBottomSheet 這兩個,前者打開的是一個背景透明的bottomsheet 后面則是背景為灰色的bottomsheet
  ///手動關閉方法  Navigator.of(context).pop(context);
  this.bottomSheet,
  this.backgroundColor,///背景色
  this.resizeToAvoidBottomPadding,////已廢棄，resizeToAvoidBottomInset作為替代
  this.resizeToAvoidBottomInset,///是否重新計算布局,類似  windowsoftinput 屬性中的額adjustReside  默認為 true，防止一些小組件重復
  this.primary =true,///是否從屏幕的頂部開始布局,即在狀態(tài)欄的底部開始
  ///DragStartBehavior.start   開始觸摸事件時 drawer就響應關閉或者打開事件,
  ///如果這只為 DragStartBehavior.down 則會在第一個事件結束是響應打開或關閉抽屜匣 drawer
  ///但是在實際使用過程中給我的感受并沒有很大差別,   官方推薦 start   更順滑
  this.drawerDragStartBehavior = DragStartBehavior.start,
  ///如果為true  則body的高度將不再是在bottomnavagationbar上面或者persistentFooterButtons這個上面了,而是整個父控件的底部
  ///這樣做的好處是如果你的bottomnavagationbar是不規(guī)則的矩形的時候,可以保證最大程度的看到你的body,不響應美觀
  this.extendBody =false,
   ///此屬性同上,但是上面說的是底部,這個說的是頂部
  this.extendBodyBehindAppBar =false,
  this.drawerScrimColor,///當側邊抽屜被打開的時候,用來填充抽屜沒有覆蓋的部分的背景顏色
  this.drawerEdgeDragWidth,///側邊欄預留打開抽屜的有效距離
  this.drawerEnableOpenDragGesture =true,///左側菜單欄是否可以拖動
  this.endDrawerEnableOpenDragGesture =true,///右側菜單欄是否可拖動
  
  })

創(chuàng)建容器

import 'package:flutter/material.dart';

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

class FMScaffoldState extends State<FMScaffoldVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
      ),
    );
  }

  AppBar _appBar(){
    return AppBar(
      title: Text('Scaffold'),
      backgroundColor: Colors.lightBlue,
    );
  }

  Container _body(){
    return Container(
      color: Colors.grey,
    );
  }
}

1. AppBar

image

2. floatingActionButton

我們給這個按鈕增加一個返回事件，避免在使用其他屬性時，導致頁面缺失返回事件。

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      ),
    );
  }
  FloatingActionButton _floatingActionButton(){
    return FloatingActionButton(
      child: Text('返回'),
      onPressed: (){
        Navigator.pop(context);
      },
    );
  }

使用 floatingActionButtonLocation 可以改變按鈕位置，可以自行嘗試。


image

3. persistentFooterButtons

  return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
      ),
    );
  }

  List<Widget> _persistentFooterButtons(){
    return [
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.cyan,
      ),
    ];
  }
image

4. drawer / endDrawer

drawer / endDrawer 可以通過點擊左上角，右上角按鍵觸發(fā)，也可以左滑，右滑觸發(fā)。
drawerEnableOpenDragGesture 默認為 true，設置 drawer 是否右滑觸發(fā)
endDrawerEnableOpenDragGesture 默認為 true，設置 endDrawer 是否左滑觸發(fā)

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
      ),
    );
  }
image
image
image

5. bottomNavigationBar

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
      ),
    );
  }

  BottomNavigationBar _bottomNavigationBar(){
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(
              Icons.home
          ),
          title: Text('home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(
              Icons.favorite
          ),
          title: Text('favorite'),
        ),
        BottomNavigationBarItem(
          icon: Icon(
              Icons.accessible
          ),
          title: Text('accessible'),
        ),
      ],
    );
  }
image

6. bottomSheet

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
        bottomSheet: _bottomSheet(),
      ),
    );
  }

  BottomSheet _bottomSheet(){
    return BottomSheet(
        onClosing: (){},
        builder: (BuildContext context){
          return Container(
            height: 60,
            color: Colors.cyan,
            child: Text('Bottom Sheet'),
            alignment: Alignment.center,
          );
        },
    );
image

7. backgroundColor

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Scaffold(
        appBar: _appBar(),
        body: _body(),
        floatingActionButton: _floatingActionButton(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        persistentFooterButtons: _persistentFooterButtons(),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: _bottomNavigationBar(),
        bottomSheet: _bottomSheet(),
      backgroundColor: Colors.yellow,
      ),
    );
  }
image

8. 其他屬性 請參考文章開頭Scaffold屬性介紹

9. Scaffold整體屬性圖標

image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容