Flutter - 底部导航详解与案例示范

BottomNavigationBar({
  Key? key, // Widget、Element 和 SemanticsNode 的标识符。 
  required List<BottomNavigationBarItem> items, // 带有图标和标题的按钮的列表，见 1.2 节
  ValueChanged<int>? onTap,
  int currentIndex = 0, // 当前活动的BottomNavigationBarItem 的项目索引。
  double? elevation, // 用于定义该 BottomNavigationBar 相对于其父级的`z`轴坐标，如果为 null，则默认为8.0。
  BottomNavigationBarType? type, // 定义 BottomNavigationBar 的布局和行为。见 1.3 节
  Color? fixedColor, // 颜色，为ARGB 格式的不可变 32 位颜色值。
  Color? backgroundColor, // 背景填充色，为ARGB 格式的不可变 32 位颜色值。
  double iconSize = 24.0, // 所有 BottomNavigationBarItem 图标的大小。[...]
  Color? selectedItemColor, // 选定的 BottomNavigationBarItem.icon 和 BottomNavigationBarItem.title 的颜色。[...]
  Color? unselectedItemColor,
  IconThemeData? selectedIconTheme, // 当前选中的BottomNavigationBarItem.icon 中图标的大小、不透明度和颜色 。[...]
  IconThemeData? unselectedIconTheme, // 当前未选中的BottomNavigationBarItem.icon 中图标的大小、不透明度和颜色 。[...]
  double selectedFontSize = 14.0, // BottomNavigationBarItem标签被选中时 的字体大小。[...]
  double unselectedFontSize = 12.0,
  TextStyle? selectedLabelStyle,
  TextStyle? unselectedLabelStyle, // 未选中时 ，BottomNavigationBarItem标签 的TextStyle 。
  bool? showSelectedLabels, // 是否为选定的BottomNavigationBarItem显示标签。
  bool? showUnselectedLabels, // 是否为未选中的BottomNavigationBarItem显示标签。
  MouseCursor? mouseCursor,
  bool? enableFeedback,
  BottomNavigationBarLandscapeLayout? landscapeLayout
})

const BottomNavigationBarItem({
  required Widget icon,
  @Deprecated('Use "label" instead, as it allows for an improved text-scaling experience. ' 'This feature was deprecated after v1.19.0.') Widget? title,
  String? label,
  Widget? activeIcon,
  Color? backgroundColor,
  String? tooltip
})

noSuchMethod(Invocation invocation) → dynamic

toString() → String

operator ==(Object other) → bool

fixed → const BottomNavigationBarType

shifting → const BottomNavigationBarType

values → const List<BottomNavigationBarType>

import 'package:flutter/material.dart';
import 'tabsPage/index.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // title: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          primarySwatch: Colors.orange,
        ),
        home: const Tabs());
  }
}

import 'package:flutter/material.dart';
import 'Page1.dart';
import 'Page2.dart';
import 'Page3.dart';
import 'Page4.dart';
class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);
  @override
  _TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
  int _selectedIndex = 0; // 用作被选中的 Tab 的索引号
  final List _tabPages = [
    const Page1(),
    const Page2(),
    const Page3(),
    const Page4()
  ]; // 列举所有 Tab 控制切换将用到的页面
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabPages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        selectedFontSize: 12.0, // 被选中时的字体大小
        unselectedFontSize: 14.0, // 未被选中时的字体大小
        showSelectedLabels: true, // 被选中时是否显示Label
        showUnselectedLabels: true, // 未被选中时是否显示Label
        enableFeedback: true, //点击会产生咔嗒声，长按会产生短暂的振动
        selectedItemColor: Colors.orange, // 设置被选中时的图标颜色
        unselectedItemColor: Colors.grey, // 设置未被选中时的图标颜色
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              size: 24.0,
            ),
            label: '工作室',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.event_note, size: 24.0),
            label: '数据',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box_outlined, size: 24.0),
            label: '通讯录',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, size: 24.0),
            label: '我的',
            backgroundColor: Colors.white,
          ),
        ],
        // 设置当前（即被选中时）页面
        currentIndex: _selectedIndex,
        // 当点击其中一个[items]被触发
        onTap: (int index) {
          setState(() {
            /*
             * item 被点中时更改当前索引。
             * 其中，currentIndex 字段设置的值时响应式的
             * 新版dart不用this.
             */
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';
enum WhyFarther { harder, smarter, selfStarter, tradingCharter }
class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);
  @override
  _Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
  set _selection(WhyFarther _selection) {}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("JcStdio"), actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.search),
          onPressed: () {},
        ),
        PopupMenuButton<WhyFarther>(
          onSelected: (WhyFarther result) {
            setState(() {
              _selection = result;
            });
          },
          icon: const Icon(
            Icons.add_circle_outline,
            size: 24.0,
          ),
          itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
            PopupMenuItem<WhyFarther>(
                value: WhyFarther.selfStarter,
                child: Row(
                  children: const [
                    Icon(
                      Icons.qr_code_scanner_outlined,
                      size: 24.0,
                    ),
                    Text('扫一扫')
                  ],
                )),
            PopupMenuItem<WhyFarther>(
                value: WhyFarther.tradingCharter,
                child: Row(
                  children: const [
                    Icon(
                      Icons.person_add,
                      size: 24.0,
                    ),
                    Text('添加朋友')
                  ],
                )),
          ],
        )
      ]),
      body: const Text('这里是 jcstdio： jclee95的个人工作室，欢迎你的到来！'),
    );
  }
}

import 'package:flutter/material.dart';
class Page2 extends StatefulWidget {
  const Page2({Key? key}) : super(key: key);
  @override
  _Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("数据")),
      body: const Text('欢迎浏览数据中心页...'),
    );
  }
}

import 'package:flutter/material.dart';
import '/datas/listData.dart';
// import '/datas/usercard.dart';
class Page3 extends StatefulWidget {
  const Page3({Key? key}) : super(key: key);
  @override
  _Page3State createState() => _Page3State();
}
class _Page3State extends State<Page3> {
  List<Widget> _listData() {
    var tempList = listData.map((value) {
      return ListTile(
          leading: Image.network(value["imageurl"]),
          title: Text(value["title"]),
          subtitle: Text(value["author"]));
    });
    return tempList.toList();
  }
// UserCard
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("通讯录"),
        ),
        body: ListView(
          children: _listData(),
        ));
  }
}

import 'package:flutter/material.dart';
class Page4 extends StatefulWidget {
  const Page4({Key? key}) : super(key: key);
  @override
  _Page3State createState() => _Page3State();
}
class _Page3State extends State<Page4> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("我的"),
        ),
        body: const Text('欢迎来到个人中心！'));
  }
}