Flutter学习笔记（三）整体布局：bottomNavigationBar，AppBar，Drawer的使用

最新推荐文章于 2024-09-11 16:49:48 发布

我在拉我

最新推荐文章于 2024-09-11 16:49:48 发布

阅读量913

点赞数 1

文章标签： flutter 主页布局

本文链接：https://blog.csdn.net/qq_41912380/article/details/96910567

版权

这篇博客介绍了Flutter应用的整体布局，包括使用bottomNavigationBar创建Home, Group, News三个部分，AppBar的定制，特别是如何添加TabBar和自定义Leading。此外，还详细讨论了如何解决在Group页面中打开Drawer时覆盖bottomNavigationBar的问题，以及如何自定义DrawerHeader，提供了一个自定义背景和头像的示例。引用了相关 Flutter 开发资源。" 130775477,7305312,Java实现：最佳对手匹配算法,"['Java', '算法', '面试', '开发语言']

摘要由CSDN通过智能技术生成

Flutter学习笔记（三）整体布局：bottomNavigationBar，AppBar，Drawer的使用

在写完大概的登陆注册页面之后，就来到整体的布局了，这个应用的功能主要是为了让用户更好的完成小组任务，用户分为两种：组长和组员。组长可以分配并管理任务，等等区别以后再说，现在先来看看整体的布局。

bottonNavigationbar的使用

先看效果图：

整体布局使用的就是一个bottomNavigationBar，分别有Home，Group，News三个部分，上面是一个AppBar，在Group页面中的AppBar中新增一个bottom属性：TabBar，并且包含Owned Group，Joined Group，Passed Group三个tab，然后来看代码：

  //声明需要的变量
  int _currentIndex = 0;
  BottomNavigationBarType _type = BottomNavigationBarType.shifting;
  List<NavigationIconView> _navigationViews;
  List<Widget> list = List();
  List<String> tilTes = ["Home","Group","News"];
  TabController _tabController; //需要定义一个Controller
  List<String> tabs = ["Owned Group", "Joined Group","Passed Group"];
  
  @override
  void initState(){
   
    super.initState();
    //新增三个页面，建议放在不同的dart文件中。
    list
      ..add(HomeScreen())
      ..add(GroupScreen())
      ..add(NewsScreen());
	//新增底部的三个选项
    _navigationViews = <NavigationIconView>[
      NavigationIconView(
        icon: const Icon(Icons.home,color: Colors.blue),
        title: 'Home',
        vsync: this,
      ),
      NavigationIconView(
        icon: const Icon(Icons.group_work,color: Colors.blue),
        title: 'Group',
        vsync: this,
      ),
      NavigationIconView(
        icon: const Icon(Icons.message,color: Colors.blue),
        title: 'News',
        vsync: this,
      ),
    ];
    _navigationViews[_currentIndex].controller.value = 1.0;

    _tabController = TabController(length: tabs.length, vsync:this);
  }

然后是构造页面的代码：

Widget build(BuildContext context) {
   

    userEmail=ModalRoute.of(context).settings.arguments;
    //print(userEmail);

    final BottomNavigationBar botNavBar = BottomNavigationBar(
      items: _navigationViews
          .map<BottomNavigationBarItem>((NavigationIconView navigationView) => navigationView.item)
          .toList(),
      currentIndex: _currentIndex,
      fixedColor