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'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
相关推荐
林间风雨10 小时前
flutter项目 -- 换logo、名称 、签名、打包
flutter
SoaringHeart20 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
tangweiguo030519871 天前
Flutter与原生混合开发:实现完美的暗夜模式同步方案
android·flutter
程序员老刘1 天前
CTO紧急叫停AI编程!不是技术倒退,而是...
flutter·ai编程
leazer1 天前
Flutter TabBar 字体缩放动画抖动问题及优化方案
flutter
yuanpan1 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
无知的前端1 天前
一文精通-Flutter 状态管理
flutter
阿笑带你学前端1 天前
Drift数据库开发实战:类型安全的SQLite解决方案
前端·flutter
农夫三拳_有点甜1 天前
Flutter MaterialApp 组件属性第一章
flutter
阿笑带你学前端1 天前
Flutter应用架构设计:基于Riverpod的状态管理最佳实践
前端·flutter