Flutter 之 Scaffold 控件

2019-08-11 本文已影响0人 Goach

属性

1. appBar 显示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar

AppBar 控件属性有这些：

leading 最左边范围的 Widget 控件，如放一个返回键
automaticallyImplyLeading 如果 leading 不为 null ，则这个属性无效，如果 leading为 null ，并且该属性为 false ，则这个范围的空间会给 Title 。如图

image.png
title appBar 的标题，在 leading 后面
actions 一个 List<Widget> 可以使用 IconButton 控件从右往左排图标，

IconButton.png

也可以使用 PopupMenuButton 最右边显示 3 个点弹出更多，如图

PopupMenuButton.png
flexibleSpace 配合 SliverAppBar 实现类似 CoordinatorLayout 控件 AppBar 折叠效果
bottom 一个 TabBar ，类似 TabLayout 控件
elevation 阴影程度，默认为 4
shape ShapeBorder ，当 elevation 大于 0 ，该属性有效，定义阴影的形状。有 RoundedRectangleBorder，ContinuousRectangleBorder，BeveledRectangleBorder
backgroundColor appBar背景颜色
brightness AppBar 的亮度，有白天 Brightness.light 和黑夜模式 Brightness.dark
iconTheme AppBar 图标的样式，通过 IconTheme.of(context) 可以进行设置
actionsIconTheme actions 属性设置的图标的样式，使用通 iconTheme
textTheme appBar 的文字样式可以使用 Theme.of(context).textTheme 来进行设置
primary appBar 内容是否嵌入 StatusBar 里面。false 为嵌入
centerTitle 标题是否居中显示
titleSpacing 标题左右间距
toolbarOpacity 应用程序栏的工具栏的透明程度。值 1.0 是完全不透明的，值 0.0 是完全透明的
bottomOpacity appBar 底部透明度，结合 bottom 属性使用设置方式同 toolbarOpacity

appBar: AppBar(
        leading: null,
        automaticallyImplyLeading : false,
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: (){

            },
          ),
          new PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                new PopupMenuItem(child: new Text("我的")),
                new PopupMenuItem(child: new Text("设置")),
                new PopupMenuItem(child: new Text("钱包")),
              ]
          )
        ],
        elevation: 10,
        shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
          style: BorderStyle.none,
        )),
        backgroundColor:Colors.green,
        brightness: Brightness.light,
        iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
        primary:true,
        centerTitle: true,
        titleSpacing:10,
        toolbarOpacity:1.0,
        bottomOpacity :0.5,
      ),

效果为

appBar.png

2. body 给一个 Widget ，当前界面所显示的主要布局内容，也就是 AppBar 下面部分，如

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello Flutter',
            ),
          ],
        ),
      ),

显示效果

body.png

3. floatingActionButton 类似 Android 的 FloatingActionButton 控件。
FloatingActionButton 有以下几个属性

child FloatingActionButton 包含的子 Widget
tooltip FloatingActionButton 控件长按显示的提示文本
foregroundColor 除了 FloatingActionButton 的背景色，其他元素的颜色
backgroundColor FloatingActionButton 的背景色
focusColor focus 为 true 获取焦点按钮显示的颜色
hoverColor 悬浮颜色，貌似没啥用
heroTag 设置 Tag ，防止同一个页面两个 FloatingActionButton 冲突问题
elevation 阴影程度
focusElevation 聚焦阴影程度
hoverElevation 悬浮状态阴影颜色
highlightElevation 高亮对应的颜色
disabledElevation 按钮禁用时的颜色
onPressed 按钮点击事件
mini 是小图标还是大图标
shape 按钮的形状(矩形 Border，圆形图标 CircleBorder )
clipBehavior Clip.antiAlias 剪辑具有抗锯齿功； Clip.antiAliasWithSaveLayer 在剪辑后立即剪辑具有抗锯齿和 saveLayer ：Clip.hardEdge：剪辑，但不应用抗锯齿；Clip.none：不剪辑。
focusNode FocusNode，对焦点事件的一些设置和处理
materialTapTargetSize 点击的效果
isExtended 是否有一个显示的动画

4. floatingActionButtonLocation

设置 FloatingActionButton 的位置，有如下几个属性

FloatingActionButton .png

5. floatingActionButtonAnimator

FloatingActionButton 控件出现或消失的动画

6. persistentFooterButtons 固定在下方显示的按钮，比如对话框下方的确定、取消按钮

persistentFooterButtons:<Widget>[
        Text('取消'),
        Text('确定')
      ],

persistentFooterButtons.png

7. drawer 侧边栏控件
通过 Drawer 创建侧边栏

 drawer: new Drawer(
       child: new UserAccountsDrawerHeader(
         accountName: new Text(
           "Flutter",
         ),
         accountEmail: new Text(
           "Flutter@gmail.com",
         ),
       ),
     ),

drawer.png

8. backgroundColor 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor
9. bottomNavigationBar 显示在页面底部的导航栏

bottomNavigationBar:BottomNavigationBar(
          items:[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '首页',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '社区',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '我的',
                ),
              ),
          ],
        currentIndex:0,
      ),

bottomNavigationBar.png

10. bottomSheet 底部弹出框
11. resizeToAvoidBottomPadding 类似于 Android 中的android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
12. resizeToAvoidBottomInset 重新计算布局空间大小
13. primary 布局是否显示到顶部状态栏
14. drawerDragStartBehavior 默认为 DragStartBehavior.down ，还有一种为
DragStartBehavior.start ，暂时不知道啥作用。
15. extendBody 暂时不知道啥作用。
16. drawerScrimColor Drawer 展开后剩余空间的颜色，可是 30% 透明那种

最后代码：

Scaffold(
      appBar: AppBar(
        leading: null,
        automaticallyImplyLeading : false,
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.ac_unit),
            onPressed: (){

            },
          ),
          new PopupMenuButton<String>(
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                new PopupMenuItem(child: new Text("我的")),
                new PopupMenuItem(child: new Text("设置")),
                new PopupMenuItem(child: new Text("钱包")),
              ]
          )
        ],
        elevation: 10,
        shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
          style: BorderStyle.none,
        )),
        backgroundColor:Colors.green,
        brightness: Brightness.light,
        iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
        textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
        primary:true,
        centerTitle: true,
        titleSpacing:10,
        toolbarOpacity:1.0,
        bottomOpacity :0.5,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello Flutter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        tooltip: 'Increment',
        foregroundColor: Colors.cyanAccent,
        backgroundColor: Colors.green,
        focusColor: Colors.red,
        hoverColor:Colors.black,
        onPressed: _showMessage,
        shape :const CircleBorder(),
        clipBehavior: Clip.none,
        focusNode:  _node,
        isExtended: true,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling,
      persistentFooterButtons:<Widget>[
        Text('取消'),
        Text('确定')
      ],
      drawer: new Drawer(
        child: new UserAccountsDrawerHeader(
          accountName: new Text(
            "Flutter",
          ),
          accountEmail: new Text(
            "Flutter@gmail.com",
          ),
        ),
      ),
      bottomNavigationBar:BottomNavigationBar(
          items:[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '首页',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '社区',
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text(
                  '我的',
                ),
              ),
          ],
        currentIndex:0,
      ),
      bottomSheet:Text('底部弹出框'),
      primary:true,
      drawerDragStartBehavior: DragStartBehavior.down,
      extendBody: true,
      drawerScrimColor: Color.fromARGB(50, 0, 0, 0),
    );

效果为:

效果1.png

效果图2.png

Flutter 之 Scaffold 控件

属性

猜你喜欢

热点阅读