Flutter基础（六）Material组件之BottomNavigationBar、TabBar、Drawer

最新推荐文章于 2023-07-26 13:37:52 发布

刘望舒

最新推荐文章于 2023-07-26 13:37:52 发布

阅读量1.1k

点赞数 1

分类专栏： Flutter 跨平台文章标签： Flutter Flutter组件 TabBar Drawer

本文链接：https://blog.csdn.net/itachi85/article/details/97680198

版权

本文详细介绍了Flutter中的Material组件，包括BottomNavigationBar、TabBar及其使用方式，如配合DefaultTabController和自定义TabController。此外，还讲解了Drawer组件的实现，如何创建具有拉出推入效果的导航抽屉，并展示了如何设置DrawerHeader和UserAccountsDrawerHeader。

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

本文首发于公众号「刘望舒」

ReactNative入门系列
 React Native组件
 Flutter基础系列

前言

在上一篇 Flutter基础（五）Material组件最佳入门（前篇）中，我介绍了Material组件的MaterialApp、Scaffold、AppBar，这篇文章接着介绍Material组件中的BottomNavigationBar、TabBar、Drawer。

1.BottomNavigationBar

BottomNavigationBar是底部的导航栏，用于在3到5个的少量视图中进行选择。一般情况下，导航栏的选项卡由文本标签、图标或两者结合的形式组成。
底部导航栏通常与javaScaffold结合使用，它会作为Scaffold.bottomNavigationBar参数。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
   
  MyStatefulWidget({
   Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();//1
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
   
  int _selectedIndex = 0;
  static const List<Widget> _widget = <Widget>[
    Text(
      'Index 0:首页',
    ),
    Text(
      'Index 1: 通讯录',
    ),
    Text(
      'Index 2: 设置',
    ),
  ];

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar示例'),
      ),
      body: Center(
        child: _widget.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const