Flutter中的Scaffold

---

1.backgroundColor属性

backgroundColor属性用于设定当前页面内容的背景色，默认使用的是ThemeData.scaffoldBackgroundColor 。

2.appBar属性（顶部标题栏）

appBar属性用于定义应用程序的顶部标题栏，显示在Scaffold的顶部区域。该属性值为AppBar类型组件，AppBar组件包含下表所示的常用属性用于设定顶部标题栏显示的效果。

属性名	类型	默认值	功能说明
leading	Widget	null	设置一个标题左侧显示的组件，如返回按钮
title	Widget	null	设置当前页面的标题名
actions	List< Widgst >	null	设施标题右侧显示的多个组件，如搜索按钮等
bottom	PreferredSizeWidget	null	设置一个在ToolBar标题栏下显示的Tab导航栏
backgroundcolor	Color	ThemeData.primaryColor	设置背景色
brightness	Brightness	ThemeData.primaryColorBrightness	设置AppBar的亮度（包括白色和黑色两种主题）
iconTheme	IconThemeData	ThemeData.primaryIconTheme	设置AppBar上图标的颜色、透明度和尺寸信息
textTheme	TextTheme	ThemeData.primaryTextTheme	设置AppBar上的文字样式
centerTitle	bool	TRUE	设置标题显示是否居中
flexibleSpace	Widget	null	设置一个显示在AppBar下的组件

appBar: AppBar(
        backgroundColor: Colors.red, //标题背景色
        title: Text("首页"),
        centerTitle: true, //调整标题处于中心位置
        // leading:Icon(Icons.person),//左侧图标
        iconTheme: IconThemeData(color: Colors.white, size: 30, opacity: 50),
        //右侧图标
        actions: [
          IconButton(
              onPressed: () {
    
    
                //点击事件
                print("我的");
                Navigator.pushNamed(context, '注册'); //需要修改-------------------
              },
              icon: Icon(Icons.search))
        ],
      ),

3.body属性（页面的主体部分）

body属性用于设定当前页面所显示的主要内容，它主要由多个Widget元素组成。

4.bottomNavigationBar属性（底部导航栏）

bottomNavigationBar属性用于定义应用程序的底部导航栏，主要由按钮加文字组成， 可以实现点击按钮切换不同的页面，显示在Scaffold的底部区域。
该属性值为BottomNavigationBar类型组件，BottomNavigationBar组件包含下表所示的常用属性。

属性名	类型	功能说明
currentIndex	int	设置用于切换按钮的当前索引值
fixedColor	Color	设置选中按钮的颜色，如没有指定，则用系统主题色
iconSize	double	设置按钮图标大小
items	List< BottomNavigationBarItem>	设置底部导航栏按钮集，每一项是一个BottomNavigationBarItem，由icon图标及title文本属性组成
onTap	ValueChanged< int >	设置按下某一个按钮的回调事件，需要根据返回的索引值设置当前索引值

  //底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
          BottomNavigationBarItem(icon: Icon(Icons.add_a_photo), label: "拍照打卡"),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: "聊天"),
          //BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],

        //按下按钮的事件onTap
        onTap: (value) {
    
    
          print(value);
          select = value;
        },
        currentIndex: select, //当前选中的按钮
        type: BottomNavigationBarType.fixed,
      ),

实现效果：

5.drawer属性（抽屉式左侧边栏）

drawer属性用于定义应用程序的左侧侧边栏，通常与ListView组件组合使用。Drawer组件包含下表所示的常用属性。

属性名	类型	默认值	功能说明
child	Widget		设置左侧侧边栏需要放置的可显示对象
elevation	double	16	设置.Material Design中组件的z坐标顺序

Drawer组件可以用DrawerHeader和UserAccountsDrawerHeader这两个组件添加头部效果。下面介绍UserAccountsDrawerHeader属性如下表。

//抽屉式左侧边栏
      drawer: Drawer(
        child: ListView(
          children: [
            UserAccountsDrawerHeader(
              accountName: Text('熊二',style: TextStyle(fontSize: 23,fontWeight: FontWeight.bold)),
              accountEmail: Text('2545996018@qq.com'),
              currentAccountPicture: CircleAvatar(
                  backgroundImage: AssetImage("images/熊二.png") //圆形头像
                  ),
              onDetailsPressed: () {
    
    },
              otherAccountsPictures: [
                //二维码显示
                new Container(
                  child: Image.asset("images/二维码.jpg"),
                )
              ],
            ),
            ListTile(leading: Icon(Icons.account_box), title: Text('账号管理')),
            ListTile(leading: Icon(Icons.location_on), title: Text('打卡记录')),
            ListTile(leading: Icon(Icons.phone), title: Text('手机号码')),
            ListTile(leading: Icon(Icons.message), title: Text('消息通知')),
            ListTile(
              leading: Icon(Icons.fastfood),
              title: Text('我的收藏'),
            ),
            ListTile(leading: Icon(Icons.help), title: Text('帮助中心')),
            ListTile(
                leading: Icon(Icons.exit_to_app),
                title: Text('退出'),
                subtitle: Text('切换账号'),
                //点击事件回到登录页面
                onTap: () {
    
    
                  Navigator.pushNamed(context, '注册');
                }),
          ],
        ),
      ),

实现效果：

6.floatingActionButton属性

foatingActionButton属性用于定义应用程序页面上悬停在内容上面的一个圆形图标按钮，用以展示对应程序中的主要动作。该属性值为FloatingActionButton类型组件, FloatingActionButton组件包含下表所示的常用属性用于设定圆形图标的样式。

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add_a_photo),
        tooltip: '拍照打卡',
        foregroundColor: Colors.white,
        backgroundColor: Colors.red,
        elevation: 10,
        highlightElevation: 20,
        onPressed: (){
    
    
          print('正在拍照！');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

实现效果：