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

这篇具有很好参考价值的文章主要介绍了Flutter——最详细(NavigationRail)使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

NavigationRail 简介

一个 Material Design 小部件,旨在显示在应用程序的左侧或右侧,以便在少量视图(通常在三到五个视图之间)之间导航。

使用场景:

通过Row属性,左侧或右侧菜单栏按钮

属性 作用
onDestinationSelected 选择索引回调监听器
selectedIndex 目前选定目的地的索引
destinations 存放菜单按钮
backgroundColor 导航栏背景色
elevation 海拔高度
height 导航栏高度
labelType 是否展示菜单栏底部文字
shadowColor 阴影颜色
animationDuration 胶囊动画显示时长
indicatorShape 选中菜单背景圆角或者边框样式
indicatorColor 选中菜单背景色
leading 顶部菜单按钮
trailing 底部菜单按钮
groupAlignment top,center,bottom 菜单按钮的显示位置
selectedLabelTextStyle 文字选择的样式
unselectedLabelTextStyle 文字未选择的样式
useIndicator 是否显示选中菜单背景色
minWidth 最小宽度

属性 groupAlignment: top、center、bottom

top
Flutter——最详细(NavigationRail)使用教程,flutter
center
Flutter——最详细(NavigationRail)使用教程,flutter
bottom
Flutter——最详细(NavigationRail)使用教程,flutter

leading: 顶部菜单按钮

Flutter——最详细(NavigationRail)使用教程,flutter

trailing: 底部菜单按钮

Flutter——最详细(NavigationRail)使用教程,flutter

indicatorShape: 设置按钮背景圆角样式

Flutter——最详细(NavigationRail)使用教程,flutter

代码块文章来源地址https://www.toymoban.com/news/detail-598400.html

import 'package:flutter/material.dart';

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

  
  State<NavigationRails> createState() => _NavigationRailsState();
}

class _NavigationRailsState extends State<NavigationRails> {
  int _selectedIndex = 0;
  NavigationRailLabelType labelType = NavigationRailLabelType.all;
  bool showLeading = false;
  bool showTrailing = false;
  double groupAlignment = -1.0;

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          NavigationRail(
            selectedIndex: _selectedIndex,
            groupAlignment: groupAlignment,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: labelType,
            minExtendedWidth: 150,
            indicatorColor: Colors.red,
            indicatorShape:  RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
              side: BorderSide(color: Colors.yellow, width: 2.0),
            ),
            leading: showLeading
                ? FloatingActionButton(
              elevation: 0,
              onPressed: () {
                // Add your onPressed code here!
              },
              child: const Icon(Icons.add),
            )
                : const SizedBox(),
            trailing: showTrailing
                ? IconButton(
              onPressed: () {
                // Add your onPressed code here!
              },
              icon: const Icon(Icons.more_horiz_rounded),
            )
                : const SizedBox(),
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('First'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('selectedIndex: $_selectedIndex'),
                const SizedBox(height: 20),
                Text('Label type: ${labelType.name}'),
                const SizedBox(height: 10),
                OverflowBar(
                  spacing: 10.0,
                  children: <Widget>[
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          labelType = NavigationRailLabelType.none;
                        });
                      },
                      child: const Text('None'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          labelType = NavigationRailLabelType.selected;
                        });
                      },
                      child: const Text('Selected'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          labelType = NavigationRailLabelType.all;
                        });
                      },
                      child: const Text('All'),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
                Text('Group alignment: $groupAlignment'),
                const SizedBox(height: 10),
                OverflowBar(
                  spacing: 10.0,
                  children: <Widget>[
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          groupAlignment = -1.0;
                        });
                      },
                      child: const Text('Top'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          groupAlignment = 0.0;
                        });
                      },
                      child: const Text('Center'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          groupAlignment = 1.0;
                        });
                      },
                      child: const Text('Bottom'),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
                OverflowBar(
                  spacing: 10.0,
                  children: <Widget>[
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          showLeading = !showLeading;
                        });
                      },
                      child:
                      Text(showLeading ? 'Hide Leading' : 'Show Leading'),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        setState(() {
                          showTrailing = !showTrailing;
                        });
                      },
                      child: Text(
                          showTrailing ? 'Hide Trailing' : 'Show Trailing'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

到了这里,关于Flutter——最详细(NavigationRail)使用教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter——最详细(Map)使用教程

    键值对的集合,您可以使用其关联的键从中检索值。 普通的 HashMap 是无序的(不保证顺序), LinkedHashMap 按键插入顺序迭代,而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1,添加元素 addEntries() 2,更新组元素 update() 3,更新所有元素的值 updateAll() 4,删除指定的元素

    2024年02月06日
    浏览(35)
  • Flutter——最详细(Scaffold)使用教程

    相当于界面的主体(类似于安卓最外层PhoneWindow),组件的展示都必须依附于它。 每一个界面都是脚手架,通过它来进行架构实现,优美的布局效果。 属性 作用 appBar 顶部的标题栏 body 显示整体布局 floatingActionButton 右下角按钮 floatingActionButtonLocation 按钮的位置 floatingActionB

    2024年02月06日
    浏览(37)
  • flutter getx 简单使用教程

    所以Flutter使用GetX真的很不错 为什么说什么GetX好用呢? 1、依赖注入 GetX是通过依赖注入的方式,存储相应的XxxGetxController;已经脱离了InheritedWidget那一套玩法,自己手动去管理这些实例,使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点!对于复杂的生产环境,跨

    2024年02月08日
    浏览(53)
  • Flutter Image库详细介绍与使用指南

    1. 介绍 在Flutter中,图片是应用程序中不可或缺的一部分,而 image 库是一个强大而灵活的图片加载和处理库。通过使用 image^ 4.1.4 ,您可以轻松地实现图片的加载、缓存、调整大小和裁剪等功能,同时还支持各种图片格式。 2. 安装 在 pubspec.yaml 文件中添加以下依赖: 然后运行

    2024年01月25日
    浏览(35)
  • 教程:Flutter 和 Rust混合编程,使用flutter_rust_bridge自动生成ffi代码

    实践环境:Arch Linux flutter_rust_bridge官方文档 Flutter环境配置教程 | Rust环境配置教程 记录使用 flutter_rust_bridge 遇到的一些坑。 假设我们已经配置了Fluuter与Rust环境 现在直接使用flutter_rust_bridge模板创建自己的项目 运行: 现在我们先让项目跑起来: 编辑 native/src/api.rs 安装代码生

    2024年02月09日
    浏览(85)
  • Flutter 使用pageview无缝隙自动轮播教程

    导入要使用的轮播图片 声明变量 然后在initState里面初始化一下 在dispose里面去掉 最后在你需要的地方加入下面代码就行了

    2024年02月07日
    浏览(40)
  • 2023年Flutter教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

    Flutter 是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。  目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发 。   GetX  是 Flutter 上的一个轻量且强大的解决方案,我们可以

    2024年02月08日
    浏览(33)
  • Flutter 安装教程 + 运行教程

    https://flutter.cn/docs/get-started/install/windows 解压完后根据自己的位置放置,如(D:flutter) 注意 请勿将 Flutter 有特殊字符或空格的路径下。 请勿将 Flutter 安装在需要高权限的文件夹内,例如 C:Program Files。 国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时

    2024年02月10日
    浏览(37)
  • Flutter状态管理:RxDart,详细介绍

    RxDart是一个基于Dart语言的响应式编程库,它提供了一套用于处理异步事件序列的工具。在Flutter应用中,RxDart可以很好地用于管理应用状态。 响应式编程是一种编程范式,它将应用程序的逻辑分解为响应事件的流。当应用程序中发生事件时,可以通过这些流来响应这些事件。

    2024年02月10日
    浏览(39)
  • 无涯教程-Flutter - 简介

    Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android、iOS、 Windows、Mac、Linux、Google Fuchsia开发应用。    通常,创建移动应用程序是一个非常复杂和具有挑战性的任务。有许多框架可用,它提供了开发移动应用程序的出色函数。对于开发移动应用程序,Andr

    2024年02月10日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包