Flutter——最详细(NavigationBar)使用教程

NavigationBar简介

Material 3 导航栏组件! 导航栏提供了一种持久且便捷的方式来在应用程序的主要目的地之间进行切换。

使用场景:

底部菜单栏模块

属性 作用
onDestinationSelected 选择索引回调监听器
selectedIndex 目前选定目的地的索引
destinations 存放菜单按钮
backgroundColor 导航栏背景色
elevation 海拔高度
height 导航栏高度
labelBehavior 是否展示菜单栏底部文字
shadowColor 阴影颜色
animationDuration 胶囊动画显示时长
indicatorShape 选中菜单背景圆角或者边框样式
indicatorColor 选中菜单背景色

alwaysShow:图标与文本同时显示;

alwaysHide:文本同时隐藏;

onlyShowSelected:选中当前索引的菜单文本同时显示;

backgroundColor : 导航栏背景色 绿色

indicatorShape: 按钮背景样式

代码块:自行运行查看

复制代码
import 'package:flutter/material.dart';

class NavigationBars extends StatefulWidget {
  const NavigationBars({super.key});

  @override
  State<NavigationBars> createState() => _NavigationBarsState();
}

class _NavigationBarsState extends State<NavigationBars> {

  int currentPageIndex = 0;
  NavigationDestinationLabelBehavior labelBehavior =
      NavigationDestinationLabelBehavior.alwaysShow;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        labelBehavior: labelBehavior,
        selectedIndex: currentPageIndex,
        backgroundColor: Colors.green,
        indicatorColor: Colors.red,
        indicatorShape:  RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: BorderSide(color: Colors.yellow, width: 2.0),
        ),
        surfaceTintColor: Colors.yellow,
        // animationDuration: Duration(milliseconds: 2000),
        // shadowColor: Colors.black,
        height: 70,
        elevation: 1,
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        destinations: const <Widget>[
          NavigationDestination(
            tooltip: "",
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          NavigationDestination(
            icon: Icon(Icons.commute),
            label: 'Commute',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.bookmark),
            icon: Icon(Icons.bookmark_border),
            label: 'Saved',
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Label behavior: ${labelBehavior.name}'),
            const SizedBox(height: 10),
            OverflowBar(
              spacing: 10.0,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysShow;
                    });
                  },
                  child: const Text('alwaysShow'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.onlyShowSelected;
                    });
                  },
                  child: const Text('onlyShowSelected'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysHide;
                    });
                  },
                  child: const Text('alwaysHide'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
相关推荐
RaidenLiu3 小时前
Flutter 多环境配置:flavor
前端·flutter
忆江南3 小时前
Widget 、 Element 和 RenderObject 关系
flutter
程序员老刘4 小时前
“工信部要求9月30日前APP必须100%适配鸿蒙“ 是真的吗?
flutter·harmonyos
亿刀4 小时前
WireGuard通讯原理
android·flutter
勤劳打代码8 小时前
曲径通幽 —— Android 息屏 TCP 连接管理
android·tcp/ip·flutter
耳東陈9 小时前
Flutter ScreenUtil Generator - 自动添加ScreenUtil后缀
flutter
恋猫de小郭9 小时前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
愿天深海1 天前
Flutter 生命周期介绍
flutter
ideal树叶1 天前
用了Flutter包体积增大就弃用Flutter吗?包体积与开发效率,这两者之间如何权衡?
flutter
mobsmobs1 天前
Flutter在购物场景中BLoC的应用
flutter