美文网首页Flutter
Flutter(八)基础控件-Scaffold

Flutter(八)基础控件-Scaffold

作者: 学_iOS | 来源:发表于2021-12-16 16:53 被阅读0次

    感君一回顾,思君朝与暮。

    本文部分图片和文字介绍转载于 https://www.jianshu.com/p/a0fcb755a7b8

    Scaffold

    • Scaffold 实现了基本的 Material 布局。只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Scaffold 来绘制。
      提供展示抽屉(drawers,比如:左边栏)、通知(snack bars) 以及 底部按钮(bottom sheets)。
      我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。
      Scaffold({
    
      Key key,
    
      this.appBar,/// 一个appBar  Widget  
      this.body,///  页面的内容,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  的布局,暂时没发现有手动隐藏的方法
      ///想要手动隐藏,可以自己创建  showBottomSheet  或者  showModalBottomSheet 这两个,前者打开的是一个背景透明的bottomsheet 后面则是背景为灰色的bottomsheet
      ///手动关闭方法  Navigator.of(context).pop(context);
      this.bottomSheet,
      this.backgroundColor,///背景色
      this.resizeToAvoidBottomPadding,////已废弃,resizeToAvoidBottomInset作为替代
      this.resizeToAvoidBottomInset,///是否重新计算布局,类似  windowsoftinput 属性中的额adjustReside  默认为 true,防止一些小组件重复
      this.primary =true,///是否从屏幕的顶部开始布局,即在状态栏的底部开始
      ///DragStartBehavior.start   开始触摸事件时 drawer就响应关闭或者打开事件,
      ///如果这只为 DragStartBehavior.down 则会在第一个事件结束是响应打开或关闭抽屉匣 drawer
      ///但是在实际使用过程中给我的感受并没有很大差别,   官方推荐 start   更顺滑
      this.drawerDragStartBehavior = DragStartBehavior.start,
      ///如果为true  则body的高度将不再是在bottomnavagationbar上面或者persistentFooterButtons这个上面了,而是整个父控件的底部
      ///这样做的好处是如果你的bottomnavagationbar是不规则的矩形的时候,可以保证最大程度的看到你的body,不响应美观
      this.extendBody =false,
       ///此属性同上,但是上面说的是底部,这个说的是顶部
      this.extendBodyBehindAppBar =false,
      this.drawerScrimColor,///当侧边抽屉被打开的时候,用来填充抽屉没有覆盖的部分的背景颜色
      this.drawerEdgeDragWidth,///侧边栏预留打开抽屉的有效距离
      this.drawerEnableOpenDragGesture =true,///左侧菜单栏是否可以拖动
      this.endDrawerEnableOpenDragGesture =true,///右侧菜单栏是否可拖动
      
      })
    

    创建容器

    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 可以通过点击左上角,右上角按键触发,也可以左滑,右滑触发。
    drawerEnableOpenDragGesture 默认为 true,设置 drawer 是否右滑触发
    endDrawerEnableOpenDragGesture 默认为 true,设置 endDrawer 是否左滑触发

      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

    相关文章

      网友评论

        本文标题:Flutter(八)基础控件-Scaffold

        本文链接:https://www.haomeiwen.com/subject/sonmfrtx.html