Flutter组件Scaffold、TabBar、底部导航

最新推荐文章于 2024-03-20 17:29:32 发布

Android_小菜菜

最新推荐文章于 2024-03-20 17:29:32 发布

阅读量925

点赞数

分类专栏： Flutter 文章标签： android ios flutter

本文链接：https://blog.csdn.net/xiaolaohuqwer/article/details/117670230

版权

Flutter 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Scaffold

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。
Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。

实现以下界面
在这里插入图片描述
一个导航栏
导航栏右边有一个分享按钮
有一个底部导航
右下角有一个悬浮的动作按钮

代码如下：

import 'package:flutter/material.dart';

class StudyScaffold extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return StudyScaffoldState();
  }

}

class StudyScaffoldState extends State<StudyScaffold>{
  int selectIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//导航栏
        title: Text("Scaffold页面"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: (){
              print("啦啦啦");
            },
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(//底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text("首页")),
          BottomNavigationBarItem(icon: Icon(Icons.account_box),title: Text("通讯录")),
          BottomNavigationBarItem(icon: Icon(Icons.add_alert),title: Text("消息")),
          BottomNavigationBarItem(icon: Icon(Icons.person),title: Text("我的")),
        ],
        currentIndex: selectIndex,//选中位置
        fixedColor:Colors.blue,//选中状态颜色
        type: BottomNavigationBarType.fixed,//解决底部导航按钮超过3个后滑动问题
        onTap: onItemTap,//
      ),
      floatingActionButton: FloatingActionButton(//悬浮按钮
        child: Icon(Icons.add),
        onPressed: (){
          print("add");
        },
      ),
    );
  }


  void onItemTap(int index) {
    setState(() {
      selectIndex = index;
    });
  }
}

抽屉菜单Drawer

Scaffold的drawer和endDrawer属性可以分别接受一个Widget来作为页面的左、右抽屉菜单。如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。

添加一个左侧抽屉菜单

//抽屉
class MyDrawer extends StatelessWidget{
  const MyDrawer({Key? key,}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true,//移除抽屉菜单顶部默认留白
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 50),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: ClipOval(
                      child: Image.asset("images/tree.jpg",width: 80,height:80,fit: BoxFit.cover,),
                    ),
                  ),
                  Text(
                    "行云流水",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.add),
                    title: Text("添加设备"),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text("管理设备"),
                  ),
                ],
              )
            ),
          ],
        ),
      ),
    );
  }
}

scaffold中添加 drawer: MyDrawer(),

如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮，点击它便可打开抽屉菜单。
如图：
在这里插入图片描述

抽屉菜单通常将Drawer组件作为根节点，它实现了Material风格的菜单面板，MediaQuery.removePadding可以移除Drawer默认的一些留白。

AppBar

AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等

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,
})

自定义菜单图标

leading: Builder(
  builder: (context){
     return IconButton(
       onPressed: (){
         Scaffold.of(context).openDrawer();
       },
       icon: Icon(Icons.dashboard,color: Colors.white,)
     );
   },
 ),

替换成功
在这里插入图片描述

TabBar 和 TabBarView结合使用

class StudyScaffoldState extends State<StudyScaffold> with SingleTickerProviderStateMixin{
  int selectIndex = 0;
  List tabValues = ["科技","军事","历史"];
  late TabController tabController ;

  @override
  void initState() {
    创建Controller
    tabController = TabController(length: tabValues.length, vsync: this);
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//导航栏
        title: Text("Scaffold页面"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.share),
            onPressed: (){
              print("啦啦啦");
            },
          ),
        ],
        leading: Builder(
          builder: (context){
            return IconButton(
              onPressed: (){
                Scaffold.of(context).openDrawer();
              },
              icon: Icon(Icons.dashboard,color: Colors.white,)
            );
          },
        ),

        bottom: TabBar(
          controller: tabController,
          tabs: tabValues.map((e) => Tab(text: e,)).toList(),
          indicatorColor: Colors.red,//指示器的颜色
          indicatorSize:TabBarIndicatorSize.tab,//指示器的宽度  .label 宽度和字体宽度一样   .tab 宽度为整个tab的宽度
          isScrollable: false,//是否可滑动  当tab数量特别多的时候设为true
          labelColor:Colors.purple,//选中的颜色
          unselectedLabelColor: Colors.white,//未选中的颜色
          indicatorWeight: 3,//指示器的高度

        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: tabValues.map((e){
          return Container(
            alignment: Alignment.center,
            child: Text(e,textScaleFactor: 2,),
          );
        }).toList(),
      ),

      bottomNavigationBar: BottomNavigationBar(//底部导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text("首页")),
          BottomNavigationBarItem(icon: Icon(Icons.account_box),title: Text("通讯录")),
          BottomNavigationBarItem(icon: Icon(Icons.add_alert),title: Text("消息")),
          BottomNavigationBarItem(icon: Icon(Icons.person),title: Text("我的")),
        ],
        currentIndex: selectIndex,//选中位置
        fixedColor:Colors.blue,//选中状态颜色
        type: BottomNavigationBarType.fixed,//解决底部导航按钮超过3个后滑动问题
        onTap: onItemTap,//
      ),
      floatingActionButton: FloatingActionButton(//悬浮按钮
        child: Icon(Icons.add),
        onPressed: (){
          print("add");
        },
      ),
    );
  }


  void onItemTap(int index) {
    setState(() {
      selectIndex = index;
    });
  }
}

TabBarView配合TabBar实现了同步切换和滑动状态同步。
效果
在这里插入图片描述

FloatingActionButton

FloatingActionButton是Material设计规范中的一种特殊Button，通常悬浮在页面的某一个位置作为某种常用动作的快捷入口。

在这里插入图片描述

底部Tab导航栏

通过Material组件库提供的BottomNavigationBar和BottomNavigationBarItem两种组件来实现Material风格的底部导航栏。

在这里插入图片描述

BottomAppBar

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

在这里插入图片描述
代码

bottomNavigationBar: BottomAppBar(
  color: Colors.white,
  shape: CircularNotchedRectangle(),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,//均分
    children: <Widget>[

      IconButton(
        onPressed: (){

        },
        icon: Icon(Icons.home),

      ),
      IconButton(
        onPressed: (){

        },
        icon: Icon(Icons.account_box)
      ),
      SizedBox(),
      IconButton(
        onPressed: (){

        },
        icon: Icon(Icons.add_alert)
      ),
      IconButton(
        onPressed: (){

        },
        icon: Icon(Icons.person)
      ),
    ],
  ),
),
floatingActionButton: FloatingActionButton(//悬浮按钮
  child: Icon(Icons.add),
  onPressed: (){
    print("add");
  },
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Android_小菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flutter组件Scaffold、TabBar、底部导航

Scaffold一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。实现以下界面一个导航栏导航栏右边有一个分享按钮有一个底部导航右下角有一个悬浮的动作按钮代码如下：import 'package:flutter/material.dart';class StudyScaffold extends StatefulWidget{ @override State<
复制链接

扫一扫