Flutter 之 Scaffold、TabBar、底部导航、抽

作者: wuchao226 | 来源:发表于2019-06-12 15:26 被阅读0次

Material 库提供了很多的 Widget，本节介绍一些常用的 Widget，如：Scaffold、TabBar、TabBarView、Drawer、BottomNavigationBar等。其余的可以参看Flutter 实战示例

Scaffold

大多数路由页都会包含一个导航栏，有些路由页可能会有抽屉（Drawer）菜单及底部 Tab 导航菜单等。Flutter Material 库提供了一个 Scaffold Widget，它是一个路由页的骨架，可以非常容易的拼装出一个完整的页面。

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

Scaffold 实现了一个基本的 material design 的布局结构；

// Scaffold 源码结构
class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar,//标题栏，显示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar
    this.body,//当前界面所显示的主要内容 Widget
    this.floatingActionButton,//悬浮按钮
    this.floatingActionButtonLocation,//悬浮按钮位置
    this.floatingActionButtonAnimator,//悬浮按钮动画
    this.persistentFooterButtons,//固定在下方显示的按钮，比如对话框下方的确定、取消按钮
    this.drawer,//侧滑菜单左
    this.endDrawer,//侧滑菜单右
    this.bottomNavigationBar,//底部导航
    this.bottomSheet,
    this.backgroundColor,//内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值
    this.resizeToAvoidBottomPadding,//类似于 Android 中的 android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
    this.resizeToAvoidBottomInset,
    this.primary = true,//试用使用primary主色
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
  }) : assert(primary != null),
       assert(extendBody != null),
       assert(drawerDragStartBehavior != null),
       super(key: key);

Scaffold组件常见属性如表所示。

属性名	类型	说明
appBar	AppBar	显示在界面顶部的一个 AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在 MaterialDesign 中定义的一个功能按钮
persistentFooterButtons	List<Widget>	固定在下方显示的按钮
drawer	Widget	侧边栏组件
bottomNavigationBar	Widget	显示在底部的导航栏按钮栏
backgroundColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免被键盘盖住内容。默认值为 true

从构造方法我们可以看到，Scaffold 可以帮助我们事先类似于 Android 中 toolbar、悬浮按钮、抽屉菜单、底部导航效果。

示例最终效果如下：

实现代码如下：

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 头部元素比如 . 左侧返回按钮中问标题右侧菜单
      appBar: AppBar( //导航栏
        title: Text("App Name"), 
        actions: <Widget>[ //导航栏右侧菜单
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      drawer: new MyDrawer(), //抽屉
      bottomNavigationBar: BottomNavigationBar( // 底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton( //悬浮按钮
          child: Icon(Icons.add),
          onPressed:_onAdd
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  void _onAdd(){
  }
}

上面代码中我们用到了另外几个Widget，下面我们来分别介绍一下：

AppBar

应用按钮组件有 AppBar 和 SliverAppBar。它们是墨设计中的 AppBar，也就是 Android 中的 Toolbar。

AppBar和 SliverAppBar 都是继承自 StatefulWidget 类，都代表 Toolbar，两者的区别在于 AppBar 位置是固定在应用最上面的；而 SliverAppBar 是可以跟随内容滚动的。。

AppBar 是页面最上面用来显示页面状态或者信息的导航条；

AppBar 是一个Material风格的导航栏，它可以设置标题、导航栏菜单、底部Tab等。下面我们看看AppBar的定义：

AppBar({
    Key key,
    this.leading,//导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
    this.automaticallyImplyLeading = true,//如果leading为null，是否自动实现默认的leading按钮
    this.title,// Toolbar 中主要内容，通常显示为当前界面的标题文字
    this.actions,// 导航栏右侧菜单;一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
    this.flexibleSpace,
    this.bottom,// 导航栏底部菜单，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
    this.elevation,// 导航栏阴影
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,//标题是否居中 
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title与leading的间隔
    this.toolbarOpacity = 1.0,//title级文字透明度
    this.bottomOpacity = 1.0,//底部文字透明度
  }) : assert(automaticallyImplyLeading != null),
       assert(elevation == null || elevation >= 0.0),
       assert(primary != null),
       assert(titleSpacing != null),
       assert(toolbarOpacity != null),
       assert(bottomOpacity != null),
       preferredSize = Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
       super(key: key);

AppBar 及 SliverAppBar 组件常见属性见表：

属性名	类型	默认值	说明
leading	Widget	null	在标题前面显示的一个组件，在首页通常显示应用的 logo; 在其他界面通常显示为返回按钮
title	Widget	null	Toolbar 中主要内容，通常显示为当前界面的标题文字
actions	List<Widget>	null	一个 Widget列表，代表 Toolbar中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示，对于不常用的菜单通常使用 Popup- MenuButton j来显示为三个点，点击后弹出二级菜单
bottom	PreferredSize Widget	null	通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
elevation	double	4	纸墨设计中组件的 z 坐标顺序，对于可滚动的 SliverAppBar，当 SliverAppBar和内容同级的时候，该值为 0，当内容滚动 SliverAppBar变为 Toolbar的时候，修改 elevatio口的值
flexibleSpace	Widget	null	一个显示在 AppBar下方的组件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常’在 SliverAppBar 中使用
brightness	Brightness	ThemeData. primaryColorBrightness	AppBar 的亮度，有白色和黑色两种主题
backgroundColor	Color	ThemeData. primaryColor	背景色
iconTheme	IconThemeData	ThemeData primaryIconTheme	AppBar 上图标的颜色、透明度和尺寸信息。默认值为 ThemeData.primaryIconTheme
textTheme	TextTheme	Them巳Data. primaryTextTheme	AppBar上的文字样式
centerTitle	bool	true	标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

AppBar可以显示顶部 leading、 title 和 actions 等内容。底部通常为选项卡 TabBar。 flexibleSpace 显示在 AppBar 的下方，高度和 AppBar 高度一样，可以实现一些特殊的效果，不过该属性通常在 SliverAppBar 中使用。具体布局如图所示。

AppBar组件布局图

如果给 Scaffold 添加了抽屉菜单，默认情况下 Scaffold 会自动将 AppBar 的 leading 设置为菜单按钮（如上面截图所示）。如果我们想自定义菜单图标，可以手动来设置leading，如

Scaffold(
  appBar: AppBar(
    title: Text("App Name"),
    leading: Builder(builder: (context) {
      return IconButton(
        icon: Icon(Icons.dashboard, color: Colors.white), //自定义图标
        onPressed: () {
          // 打开抽屉菜单  
          Scaffold.of(context).openDrawer(); 
        },
      );
    }),
    ...  
  )

代码运行效果：

可以看到左侧菜单已经替换成功。

代码中打开抽屉菜单的方法在 ScaffoldState 中，通过 Scaffold.of(context) 可以获取父级最近的 Scaffold Widget 的 State 对象。Flutter 还有一种通用的获取StatefulWidget 对象 State 的方法：通过 GlobalKey 来获取！步骤有两步：

给目标 StatefulWidget 添加 GlobalKey

//定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
static GlobalKey<ScaffoldState> _globalKey= new GlobalKey();
...
Scaffold(
    key: _globalKey , //设置key
    ...  
)

通过GlobalKey来获取State对象

_globalKey.currentState.openDrawer()

TabBar

下面我们看看 TabBar 的定义：

const TabBar({
    Key key,
    @required this.tabs,//显示的标签内容，一般使用Tab对象,也可以是其他的Widget
    this.controller,//TabController对象
    this.isScrollable = false,//是否可滚动
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器高度
    this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding
    this.indicator,//指示器decoration，例如边框等
    this.indicatorSize,//指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
    this.labelColor,//选中label颜色
    this.labelStyle,//选中label的Style
    this.labelPadding,//每个label的padding值
    this.unselectedLabelColor,//未选中label颜色
    this.unselectedLabelStyle,//未选中label的Style
    }) : assert(tabs != null),
    assert(isScrollable != null),
    assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
    assert(indicator != null || (indicatorPadding != null)),
    super(key: key);

下面我们通过“bottom”属性来添加一个导航栏底部tab按钮组，将要实现的效果如下：

Material组件库中提供了一个TabBar组件，它可以快速生成Tab菜单，下面是上图对应的源码：

class _ScaffoldRouteState extends State<ScaffoldRoute>
    with SingleTickerProviderStateMixin {

  TabController _tabController; //需要定义一个Controller
  List tabs = ["新闻", "历史", "图片"];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ... //省略无关代码
        bottom: TabBar(   //生成Tab菜单
          controller: _tabController,
          tabs: tabs.map((e) => Tab(text: e)).toList()
        ),
      ),
      ... //省略无关代码
  }

上面代码首先创建了一个 TabController ，它是用于控制/监听 Tab 菜单切换。然后通过 TabBar 生成了一个底部菜单栏，TabBar 的 tabs 属性接受一个 Widget 数组，表示每一个 Tab 子菜单，我们可以自定义，也可以像示例中一样直接使用 Tab Widget，它也是 Material 组件库提供的 Material 风格的 Tab 菜单。

Tab Widget有三个可选参数，除了可以指定文字外，还可以指定Tab菜单图标，或者直接自定义Widget，定义如下：

Tab({
  Key key,
  this.text, // 菜单文本
  this.icon, // 菜单图标
  this.child, // 自定义Widget
})

TabBarView

const TabBarView({
    Key key,
    @required this.children, //Tab页内容页组件数组集合
    this.controller, //TabController对象
    this.physics,
    this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(children != null),
       assert(dragStartBehavior != null),
       super(key: key);

通过 TabBar 我们只能生成一个静态的菜单，如果要实现 Tab 页，我们可以通过TabController 去监听 Tab 菜单的切换去切换 Tab 页，代码如：

_tabController.addListener((){  
  switch(_tabController.index){
    case 1: ...;
    case 2: ... ;   
  }
});

如果我们 Tab 页可以滑动切换的话，还需要在滑动过程中更新 TabBar 指示器的偏移。显然，要手动处理这些是很麻烦的，为此，Material 库提供了一个TabBarView 组件，它可以很轻松的配合 TabBar 来实现同步切换和滑动状态同步，示例如下：

Scaffold(
  appBar: AppBar(
    ... //省略无关代码
    bottom: TabBar(
      controller: _tabController,
      tabs: tabs.map((e) => Tab(text: e)).toList()),
  ),
  drawer: new MyDrawer(),
  body: TabBarView(
    controller: _tabController,
    children: tabs.map((e) { //创建3个Tab页
      return Container(
        alignment: Alignment.center,
        child: Text(e, textScaleFactor: 5),
      );
    }).toList(),
  ),
  ... // 省略无关代码  
)

运行后效果如下：

现在，无论是点击导航栏 Tab 菜单还是在页面上左右滑动，Tab 页面都会切换，并且 Tab 菜单的状态和 Tab 页面始终保持同步。可以发现，TabBar 和TabBarView 的 controller 是同一个！正是如此，TabBar 和 TabBarView 正是通过同一个 controller 来实现菜单切换和滑动状态同步的。

抽屉菜单Drawer

Scaffold 的 drawer 和 endDrawer 属性可以分别接受一个 Widget 作为页面的左、右抽屉菜单，如果开发者提供了抽屉菜单，那么当用户手指从屏幕左/右向里滑动时便可打开抽屉菜单。本节开始部分的示例中实现了一个左抽屉菜单MyDrawer，源码如下：

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        // DrawerHeader consumes top MediaQuery padding.
        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(
                        "imgs/avatar.png",
                        width: 80,
                      ),
                    ),
                  ),
                  Text(
                    "Wendux",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: const Icon(Icons.add),
                    title: const Text('Add account'),
                  ),
                  ListTile(
                    leading: const Icon(Icons.settings),
                    title: const Text('Manage accounts'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

抽屉菜单通常将Drawer作为根节点，它实现了Material风格的菜单面板，MediaQuery.removePadding可以移除抽Drawer内的一些指定空白。

我们也可以使用 UserAccountsDrawerHeader 快速构建了 drawer 的头部布局；头像和背景都是使用的网络图片加载，在菜单 Item 部分我们使用 ListTile 来处理，左边是一个图标右边是文字的样式。
源码如下：

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          UserAccountsDrawerHeader(
            //通常用来设置背景颜色或者背景图片
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(
                        "http://t2.hddhhn.com/uploads/tu/201612/98/st93.png"))),
            //当前用户的名字
            accountName: Text("flutterDrawer"),
            //当前用户的 Email
            accountEmail: Text('flutterDrawer@163.com'),
            //用来设置当前用户的头像
            currentAccountPicture: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
            ),
            //当 accountName 或者 accountEmail 被点击的时候所触发的回调函数，可以用来显示其他额外的信息
            onDetailsPressed: () {
              print("onDetailsPressed");
            },
            //用来设置当前用户的其他账号的头像(做多显示三个)
            otherAccountsPictures: <Widget>[
              CircleAvatar(
                backgroundImage: AssetImage("images/avatar.png"),
              ),
              CircleAvatar(
                backgroundImage: AssetImage("images/avatar.png"),
              ),
              CircleAvatar(
                backgroundImage: AssetImage("images/avatar.png"),
              ),
            ],
          ),
          ListTile(
            leading: Icon(Icons.refresh),
            title: Text("刷新"),
          ),
          new ListTile(
            leading: new Icon(Icons.help),
            title: new Text("帮助"),
          ),
          new ListTile(
            leading: new Icon(Icons.chat),
            title: new Text("会话"),
          ),
          new ListTile(
            leading: new Icon(Icons.settings),
            title: new Text("设置"),
          ),
        ],
      ),
    );
  }
}

运行效果图如下：

BottomNavigationBar(底部导航条组件)

接下来我们来看下 bottomNavigationBar 底部导航按钮。我们可以通过 Scaffold 的 bottomNavigationBar 属性来设置底部导航，如本节开始示例所示，我们通过 Material 组件库提供的 BottomNavigationBar 和 BottomNavigationBarItem 两个 Widget 来实现 Material 风格的底部导航栏

构造方法：

BottomNavigationBar({
    Key key,
    @required this.items,//List<BottomNavigationBarItem>
    this.onTap,//当底部导航的一个item被点击时，它会调用此方法，并传入当前item的index值，这样就能改变焦点到当前的index上的item了。
    this.currentIndex = 0,//当前再items中被选中的index
    this.elevation = 8.0,
    BottomNavigationBarType type,//底部item类型，fixed自适应，shifting选择放大
    Color fixedColor,//选中颜色
    this.backgroundColor,
    this.iconSize = 24.0,////图标大小
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  })

来看下BottomNavigationBarItem。

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })

示例代码如下：

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _currentIndex = 0;

  //定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
 static GlobalKey<ScaffoldState> _globalKey = new GlobalKey();
  //存储的四个页面，和Fragment一样
  final List<Widget> _children = [
    HomePage(),
    SearchPage(),
    TravelPage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置key
      key: _globalKey,
      appBar: AppBar(
        //导航栏
        title: Text('App Name'),
        leading: Builder(builder: (context) {
          return IconButton(
              //自定义图标
              icon: Icon(
                Icons.dashboard,
                color: Colors.white,
              ),
              onPressed: () {
                //打开抽屉菜单
                //Scaffold.of(context).openDrawer();
                //通过GlobalKey来获取State对象
                _globalKey.currentState.openDrawer();
              });
        }),
        actions: <Widget>[
          //导航栏右侧
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          )
        ],
      ),
      //抽屉
      drawer: MyDrawer(),

      body: _children[_currentIndex],
      //底部导航
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text('School')),
        ],
        //设置显示的模式
        type: BottomNavigationBarType.fixed,
        //设置当前的索引
        currentIndex: _currentIndex,
        fixedColor: Colors.blue,
        //tabBottom的点击监听
        onTap: _onItemTapped,
      ),
      //悬浮按钮
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: _onAdd),
      //悬浮按钮位置
      //floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  void _onAdd() {}
}

运行效果图如下：

Material 组件库中提供了一个 BottomAppBar Widget，可以和 FloatingActionButton 配合实现这种"打洞"效果。源码如下：

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

可以看到，上面代码中没有控制打洞位置的属性，实际上，打洞的位置取决于 FloatingActionButton 的位置，上面 FloatingActionButton 的位置为：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

BottomAppBar的shape 属性决定洞的外形，CircularNotchedRectangle实现了一个圆形的外形，我们也可以自定义外形

示例代码如下：

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _currentIndex = 0;

  //定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
  static GlobalKey<ScaffoldState> _globalKey = new GlobalKey();
  //存储的四个页面，和Fragment一样
  final List<Widget> _children = [
    HomePage(),
    SearchPage(),
    TravelPage(),
    MyPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置key
      key: _globalKey,
      appBar: AppBar(
        //导航栏
        title: Text('App Name'),
        leading: Builder(builder: (context) {
          return IconButton(
              //自定义图标
              icon: Icon(
                Icons.dashboard,
                color: Colors.white,
              ),
              onPressed: () {
                //打开抽屉菜单
                //Scaffold.of(context).openDrawer();
                //通过GlobalKey来获取State对象
                _globalKey.currentState.openDrawer();
              });
        }),
        actions: <Widget>[
          //导航栏右侧
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          )
        ],
      ),
      //抽屉
      drawer: MyDrawer(),
    
      body: _children[_currentIndex],
      //底部导航
       bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(), //底部导航栏打一个圆形的洞
        child: Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: null),
            SizedBox(), //中间位置空出
            IconButton(icon: Icon(Icons.business), onPressed: null),
          ],
          //均分底部导航栏横向空间
          mainAxisAlignment: MainAxisAlignment.spaceAround,
        ),
      ),
      //悬浮按钮
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: _onAdd),
      //悬浮按钮位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  void _onAdd() {}
}

运行效果图如下：

FloatingActionButton

FloatingActionButton 是Material设计规范中的一种特殊 Button，通常悬浮在页面的某一个位置作为某种常用动作的快捷入口，如本节示例中页面右下角的"➕"号按钮。我们可以通过 Scaffold 的 floatingActionButton 属性来设置一个 FloatingActionButton，同时通过 floatingActionButtonLocation 属性来指定其在页面中悬浮的位置。

Flutter 之 Scaffold、TabBar、底部导航、抽

Scaffold

AppBar

TabBar

TabBarView

抽屉菜单Drawer

BottomNavigationBar(底部导航条组件)

FloatingActionButton

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter