admin 管理员组

文章数量: 887021

【Flutter

文章目录

    • 1. TabBar
      • 1.1 代码
      • 1.2 效果图
    • 2. BottomNavigationBar
      • 2.1 构建底部标签
      • 2.2 创建导航栏
      • 2.3 效果图

1. TabBar

Flutter 中用于快速实现顶部导航栏的组件库。

  • TabBar
    Tab 页的 Title 控件，切换 Tab 页的入口，一般放到 AppBar 控件下使用，内部有**Title*属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用 Column 或 ListView 控件包装一下。子元素为 Tab 类型的数组。

  • TabBarView
    Tab 页的内容容器，其内放置 Tab 页的主体内容。子元素可以是多个各种类型的控件。

  • TabController
    这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。

1.1 代码

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(body: Center(child: AppBarStatefulWidget(),)));}
}class AppBarStatefulWidget extends StatefulWidget {const AppBarStatefulWidget({Key? key}) : super(key: key);@override_AppBarStatefulWidget createState() => _AppBarStatefulWidget();
}class _AppBarStatefulWidget extends State with SingleTickerProviderStateMixin {final List<Tab> _tabs = <Tab>[new Tab(text: '关注'),new Tab(text: '推荐'),new Tab(text: '视频'),new Tab(text: '游戏'),new Tab(text: '音乐'),new Tab(text: '体育'),new Tab(text: '生活'),new Tab(text: '图片'),];var _tabController;@overridevoid initState() {_tabController = TabController(vsync: this, length: _tabs.length);super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(body: TabBarView(controller: _tabController,children: _tabs.map((Tab tab) {return new Center(child: Text(tab.text.toString()));}).toList(),),appBar: AppBar(title: Text("TabBarView 的基本使用"),centerTitle: true,bottom: TabBar(isScrollable: true,labelColor: Colors.redAccent,   // 选中的Widget颜色indicatorColor:Colors.redAccent, // 选中的指示器颜色labelStyle: new TextStyle(fontSize: 15.0),// 必须设置，设置 color 没用的，因为 labelColor 已经设置了unselectedLabelColor: Colors.white,unselectedLabelStyle: new TextStyle(fontSize: 15.0), // 设置 color 没用的，因为unselectedLabelColor已经设置了controller: _tabController,// tabbar 必须设置 controller 否则报错indicatorSize: TabBarIndicatorSize.label,// 有 tab 和 label 两种tabs: _tabs,),),);}
}

1.2 效果图

2. BottomNavigationBar

BottomNavigationBar 即是底部导航栏控件，显示在页面底部的设计控件，用于在试图切换，底部导航栏包含多个标签、图标或者两者搭配的形式，简而言之提供了顶级视图之间的快速导航。

2.1 构建底部标签

 //底部数据final Map bottomMap ={"首页":Icon(Icons.home),"朋友圈":Icon(Icons.camera),"信息":Icon(Icons.message),"其他":Icon(Icons.devices_other),};

2.2 创建导航栏

因为点击导航栏需要对应的字体显示，所以MyHomePage需要继承StatefulWidget，增加State，

//用无状态控件显示
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//主题色theme: ThemeData(//设置为红色primarySwatch: Colors.red),//这是一个Widget对象，用来定义当前应用打开的时候，所显示的界面home: MyHomePageWidget(),);}
}class MyHomePageWidget extends StatefulWidget{@overrideState<StatefulWidget> createState(){return new MyHomePage();}
}
class MyHomePage extends State<MyHomePageWidget> {//底部数据final Map bottomMap ={"首页":Icon(Icons.home),"朋友圈":Icon(Icons.camera),"信息":Icon(Icons.message),"其他":Icon(Icons.devices_other),};int _index = 0;bottomNavigationBar: BottomNavigationBar(items: (){var items = <BottomNavigationBarItem>[];bottomMap.forEach((k,v){items.add(BottomNavigationBarItem(title:Text(k),//取map的值icon : v,//取map的图标backgroundColor:Colors.red,//背景红色));});return items;}(),currentIndex: _index,//选中第几个onTap:(position){Fluttertoast.showToast(msg: 'text inputted: $position',toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,timeInSecForIos: 1,);setState(() {_index = position;//状态更新});}),}

2.3 效果图

本文标签： Flutter

版权声明：本文标题：【Flutter 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687298628h86643.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。