Flutter 容器控件篇-->Scaffold-IT知识空间

文章已同步至掘金：https://juejin.cn/post/6844903956280246280
欢迎访问😃，有任何问题都可留言评论哦~

Flutter 中的Scaffold实现了基本的 Material 布局。
只要是在 Material 中定义了的单个界面显示的布局控件元素，都可以使用 Scaffold 来绘制。

可以简单的将Scaffold理解为一个布局的容器。可以在这个容器中绘制我们的用户界面。

源码示例

构造函数如下：

const Scaffold({
	Key key,
	this.appBar,
	this.body,
	this.floatingActionButton,
	this.floatingActionButtonLocation,
	this.floatingActionButtonAnimator,
	this.persistentFooterButtons,
	this.drawer,
	this.endDrawer,
	this.bottomNavigationBar,
	this.bottomSheet,
	this.backgroundColor,
	this.resizeToAvoidBottomPadding,
	this.resizeToAvoidBottomInset,
	this.primary = true,
	this.drawerDragStartBehavior = DragStartBehavior.start,
	this.extendBody = false,
})

属性解释

只介绍重要和常用的属性

appBar(重点)

就是显示在页面顶部的文本

源码示例：

构造函数如下：

AppBar({
  Key key,
  this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
  this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
  this.title,// 页面标题
  this.actions, // 导航栏右侧菜单
  this.bottom, // 导航栏底部菜单，通常为Tab按钮组
  this.elevation = 4.0, // 导航栏阴影
  this.centerTitle, //标题是否居中 
  this.backgroundColor,
  ...
})

AppBar 和 SliverAppBar 都是 Material Design 中的 App Bar

二者的区别在于 AppBar 的位置是固定在应用最上面的；而 SliverAppBar 是可以跟随内容滚动的。

主要属性：

leading：在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮，如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮
title：当前页面的标题文字
actions：一个 Widget 列表，代表 AppBar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
bottom：一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 AppBar 标题下面显示一个 Tab 导航栏
flexibleSpace：一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
backgroundColor：AppBar的颜色，默认值为ThemeData.primaryColor。改值通常和下面的三个属性一起使用
- brightness：AppBar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
- iconTheme：App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
- textTheme： App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
centerTitle：标题是否居中显示，默认为false，居中显示为true

代码示例：

class _CategoryPageState extends State<CategoryPage>
    with SingleTickerProviderStateMixin {
	
  TabController _tabController; //需要定义一个Controller
  List tabs = ["吃饭", "睡觉", "打游戏"];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 创建Controller
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.home),
        title: Text('AppBar'),	//标题
        backgroundColor: Colors.pink,	//背景色
        centerTitle: true, //标题居中显示
        bottom: TabBar(
          controller: _tabController,
          tabs: tabs
              .map((item) => Tab(
                    text: item,
                  ))
              .toList(),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.subject),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

运行效果：

flutter-scaffold-1

上面通过TabBar我们只能生成一个静态的菜单，真正的Tab页还没有实现，当前你必须点击才可以切换。
但是我们需要用手在上面左右滑动的时候，也可以切换，这个时候就要用到TabBarView组件，并且需要去监听Tab菜单的切换（在下面进行介绍）

body

页面要显示的主体内容，不做过多介绍（下面写代码示例的时候，写一下）

floatingActionButton

在body中定义的一个浮动按钮，默认在屏幕右下方

代码示例：

floatingActionButton: FloatingActionButton(
	child: Icon(Icons.add),
	onPressed: (){},
),

运行效果：

flutter-scaffold-2

floatingActionButtonLocation

可以改变上面的浮动按钮的位置

如：

floatingActionButtonLocation:FloatingActionButtonLocation.centerFloat,

可以让按钮在页面底部的中间位置显示，下面要实现一种按钮的打洞效果，会用到这个属性

persistentFooterButtons

固定在下方显示的按钮

代码示例：

只贴增加的代码（在Scaffold组件下，与appBar、body平级）

floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
persistentFooterButtons: <Widget>[
	RaisedButton(
	  child: Text("我",style: TextStyle(color: Colors.white),),
	  onPressed: () {},
	),
	RaisedButton(
	  child: Text("你",style: TextStyle(color: Colors.white),),
	  onPressed: () {},
	),
	RaisedButton(
	  child: Text("他",style: TextStyle(color: Colors.white),),
	  onPressed: () {},
	)
],

运行效果：

flutter-scaffold-3

bottomNavigationBar(重点)

显示在页面底部的导航栏

代码示例：

bottomNavigationBar: BottomNavigationBar(
	items: <BottomNavigationBarItem>[
	  //items长度必须大于等于2
	  BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
	  BottomNavigationBarItem(icon: Icon(Icons.category), title: Text('分类')),
	  BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的')),
	],
),

运行效果：

flutter-scaffold-4

那么如果我们想要实现这种样式的怎么办呢？

flutter-scaffold-5

也非常简单，Material组件库中提供了一个BottomAppBar组件，它可以和FloatingActionButton配合实现这种“打洞”效果，

代码：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
    color: Colors.white,
    shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞，也可以自定义外形
    child: Row(
      children: [
    	IconButton(icon: Icon(Icons.home)),
    	SizedBox(), //中间位置空出
    	IconButton(icon: Icon(Icons.business)),
      ],
      mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间
    ),
),

注：一定要把FloatingActionButtonLocation的值设置为centerDocked才可以

drawer、endDrawer(重点)

Scaffold的drawer和endDrawer属性可以分别接受一个Widget来作为页面的左、右抽屉菜单。

下面举一个从左边拉出来的菜单的例子：

代码示例：

drawer: Drawer(
    child: MediaQuery.removePadding(
      context: context,
      //移除抽屉菜单顶部默认留白
      removeTop: true,
      child: Column(
    	crossAxisAlignment: CrossAxisAlignment.start,
    	children: <Widget>[
    	  Padding(
    		padding: const EdgeInsets.only(top: 38.0),
    		child: Row(
    		  children: <Widget>[
    			Padding(
    			  padding: const EdgeInsets.symmetric(horizontal: 16.0),
    			  child: ClipOval(
    				child: Image.asset(
    				  "images/Test.jpg",
    				  width: 80,
    				),
    			  ),
    			),
    			Text(
    			  "夜夕i",
    			  style: TextStyle(fontWeight: FontWeight.bold),
    			)
    		  ],
    		),
    	  ),
    	  Expanded(
    		child: ListView(
    		  children: <Widget>[
    			ListTile(
    			  leading: const Icon(Icons.card_travel),
    			  title: const Text('账号管理'),
    			),
    			ListTile(
    			  leading: const Icon(Icons.settings),
    			  title: const Text('设置'),
    			),
    		  ],
    		),
    	  ),
    	],
      ),
    ),
),

默认屏幕上什么都没有，当你用手在屏幕上面从屏幕左边往右边滑的时候，就会显示出来

效果展示：

flutter-scaffold-6

backgroundColor

设置body的背景颜色，没什么好说的

TabBarView(重点)

在上面已经说了，appBar中的bottom中的TabBar只能生成一个静态的菜单，真正的Tab页还没有实现，你必须点击才可以切换。

那么如何实现在屏幕上滑动，并且和下面body中的内容实现同步呢？
这个时候就用到了TabView

代码示例：

class _CategoryPageState extends State<CategoryPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController; //需要定义一个Controller
  List tabs = ["吃饭", "睡觉", "打游戏"];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 创建Controller
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar'),
        centerTitle: true, //标题居中显示
        bottom: TabBar(
          controller: _tabController,
          tabs: tabs
              .map((item) => Tab(
                    text: item,
                  ))
              .toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabs.map((e) {
          //创建3个Tab页
          return Container(
            alignment: Alignment.center,
            child: Text(e, textScaleFactor: 5),
          );
        }).toList(),
      ),
    );
  }
}

这个时候，无论你是点击上面的吃饭、睡觉、打游戏的按钮，或者用手在屏幕上面左右滑动，都可以实现页面和数据同步

运行效果：

flutter-scaffold-7

resizeToAvoidBottomPadding(重点)

控制界面内容 body，是否重新布局来避免底部被覆盖了，
比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

PayPal	https://paypal.me/junyangfan
BTC (Bitcoin)	3PQAbWdvH1yMSUV1SDkwpjcNW1UaDWs3Jt
USDT (TRC20)	TNVHbWeDcXZ5vXHPt9svePPKs5zZLzX4PS

PayPal	https://paypal.me/junyangfan
BTC (Bitcoin)	3PQAbWdvH1yMSUV1SDkwpjcNW1UaDWs3Jt
USDT (TRC20)	TNVHbWeDcXZ5vXHPt9svePPKs5zZLzX4PS

目录CONTENT

Flutter 容器控件篇-->Scaffold

源码示例

属性解释

appBar(重点)

body

floatingActionButton

floatingActionButtonLocation

persistentFooterButtons

bottomNavigationBar(重点)

drawer、endDrawer(重点)

backgroundColor

TabBarView(重点)

resizeToAvoidBottomPadding(重点)

K_K

评论区