Flutter 入门学习之初始界面及底部导航栏


MaterialApp

在学习Flutter的过程中我们第一个看见的控件应该就是MaterialApp,毕竟创建一个新的Flutter项目的时候,项目第一个组件就是MaterialApp,这是一个Material风格的根控件,一般用于void main() {runApp(MyApp());}runApp() 类的build()方法返回的控件,基本用法如下:

MaterialApp(
    debugShowCheckedModeBanner: false,    //隐藏右上角的DEBUG标签
    title: 'Flutter Demo',    //在任务管理窗口中所显示的应用名字
    theme: ThemeData(        //设置整个App的主题
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    darkTheme: ThemeData(
      primaryColor: Colors.red
      ),
    home: home: IndexPage(),
);

在上述代码的 home: IndexPage() 处,笔者对组件做了一个分离,IndexPage() 组件内为Scaffold

Scaffold

Scaffold 实现了 Material 风格的基本布局结构,它提供了展示drawers(抽屉栏)、snackbars(通知条)和bottomsheets(上滑栏)的功能,基本用法如下:

Scaffold(
    //设置AppBar栏 
    appBar: AppBar(        
        title: Text("Flutter Demo"),
    ),
    //设置从左和右出现的抽屉栏
    drawer: Drawer(),
      endDrawer: Drawer(),
    //设置悬浮按钮,默认显示在右下角
    floatingActionButton: FloatingActionButton(),
    backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
    );

BottomNavigationBar

BottomNavigationBarBottomNavigationBarItem配合Scaffold控件使用可以实现底部导航效果,类似于微信底部的导航效果,以下是一个简单的底部导航栏实例:

  1. 在项目 Lib 目录中,新建 Pages 包,在其中新建三个界面,分别是home_page.dartother_page.dartprofile_page.dart ,当然上文中出现 index_pages.dart 也放在这里,在 index_pages.dart 中引入:

    import 'home_page.dart';
    import 'other_page.dart';
    import 'profile_page.dart';
  2. index_pages.dart内的IndexPage(StatefulWidget)类中 BottomNavigationBarItem 列表,定义界面列表以及当前显示界面的索引

    final List<BottomNavigationBarItem> bottomTabs = [
        BottomNavigationBarItem(
            //未选中图标
            icon: Icon(CupertinoIcons.home),
            //选中时控件
            activeIcon: Icon(CupertinoIcons.scope),
            //选中时导航栏背景颜色
            backgroundColor: Colors.redAccent,
            //显示的文字
            label: "主页"
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.cart),
            backgroundColor: Colors.deepPurpleAccent,
            label: "其他"
        ),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            backgroundColor: Colors.amber,
            label: "我的"
        ),
    ];
    
    final List tabBodies = [
        HomePage(),
        OtherPage(),
        ProfilePage()
    ];
    
    int currentIndex = 0;
    var currentPage;
  3. IndexPage类的状态类 _IndexPageState (extends State<IndexPage>) 中重写build方法:

      
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter Demo"),
          ),
          backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
          bottomNavigationBar: BottomNavigationBar(
            //底栏切换的样式
            type: BottomNavigationBarType.fixed,
            //当前的序列
            currentIndex: currentIndex,
            //颜色设置
            selectedItemColor: Theme.of(context).primaryColor,
            unselectedItemColor: Colors.grey,
            //底栏子项的列表
            items: bottomTabs,
            //每个子项点击触发的方法
            onTap: (index){
              setState(() {
                //方法触发后,必须调用setState()方法重新绘制UI
                currentIndex = index;
                //将点击的子项的索引作为当前显示的索引,并切换索引对应的视图界面
                currentPage = tabBodies[currentIndex];
              });
            },
          ),
          //显示的界面
          body: currentPage,
        );
      }

    关于 BottomNavigationBarItem 切换的显示模式,默认 3-5 个时采用fixed模式,4 个时默认采用shifting模式,当然,是可以指定的。


文章作者: Mahoo Huang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Mahoo Huang !
评论
 本篇
Flutter 入门学习之初始界面及底部导航栏 Flutter 入门学习之初始界面及底部导航栏
MaterialApp在学习Flutter的过程中我们第一个看见的控件应该就是MaterialApp,毕竟创建一个新的Flutter项目的时候,项目第一个组件就是MaterialApp,这是一个Material风格的根控件,一般用于void
2020-11-20
下一篇 
Vuejs 移动端开发初始配置 Vuejs 移动端开发初始配置
添加 viewpoit<meta>标签内添加viewpoit,以此来动态的获取用户设备的屏幕宽度和不允许用户手动放大和缩小页面等 清除初始样式 & document.querySelectorAll('.
2020-11-13
  目录