锐客网

  1. 首页 > 睿知 > it技术 > >

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar

IT知识NavigationNavigationBa

博观而约取，厚积而薄发。这篇文章主要讲述在 Flutter 中使用 NavigationRail 和 BottomNavigationBar相关的知识，希望能为你提供帮助。
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar

作者：坚果
公众号："??大前端之旅??"
华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，??开源项目GVA成员之一??，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，javascript等。
本文将向您展示如何使用?NavigationRail?和?BottomNavigationBar在 Flutter 中创建自适应布局?。我们将浏览一下这个概念，然后通过一个完整的例子来在实践中应用这个概念。
?NavigationRail?小部件用于创建位于应用左侧或右侧的“垂直标签栏”。它非常适合平板电脑、笔记本电脑、电视等宽屏设备。它通常包含多个视图，让用户可以轻松地在不同视图之间切换。
BottomNavigationBar?小?部件用于创建非常适合智能手机的底部标签栏。它由多个选项卡组成，让用户可以轻松地在视图之间导航。
我们可以使用?NavigationRail?和?BottomNavigationBar?来构建现代自适应布局。当屏幕很大时，我们显示?NavigationRail?，当屏幕较小时，我们显示?BottomNavigationBar?。一次只出现其中一个。要检测屏幕宽度，我们可以使用：
MediaQuery.of(context).size.width

这个例子应用预览
我们要构建的应用程序有一个导航栏、一个底部标签栏和 4 个不同的视图：主页、Feed、收藏夹和设置。每个视图都与底部标签栏的一个标签和导航栏的一个项目相连。
  • 如果屏幕宽度小于 640 像素，则将呈现底部标签栏，而不会显示左侧导航栏。
  • 如果屏幕宽度等于或大于 640 像素，则不会呈现底部标签栏，而会显示左侧导航栏。
以下是它的工作原理：
截图
代码
这是生成上述应用程序的完整代码（带有解释）：
// main.dart
import package:flutter/material.dart;

void main()
runApp(const MyApp());


class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
@override
Widget build(BuildContext context)
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 大前端之旅,
theme: ThemeData(primarySwatch: Colors.indigo),
home: const HomeScreen());



class HomeScreen extends StatefulWidget
const HomeScreen(Key? key) : super(key: key);

@override
_HomeScreenState createState() => _HomeScreenState();


class _HomeScreenState extends State< HomeScreen>
// The contents of views
// Only the content associated with the selected tab is displayed on the screen
final List< Widget> _mainContents = [
// Content for Home tab
Container(
color: Colors.yellow.shade100,
alignment: Alignment.center,
child: const Text(
Home,
style: TextStyle(fontSize: 40),
),
),
// Content for Feed tab
Container(
color: Colors.purple.shade100,
alignment: Alignment.center,
child: const Text(
Feed,
style: TextStyle(fontSize: 40),
),
),
// Content for Favorites tab
Container(
color: Colors.red.shade100,
alignment: Alignment.center,
child: const Text(
Favorites,
style: TextStyle(fontSize: 40),
),
),
// Content for Settings tab
Container(
color: Colors.pink.shade300,
alignment: Alignment.center,
child: const Text(
Settings,
style: TextStyle(fontSize: 40),
),
)
];

// The index of the selected tab
// In the beginning, the Home tab is selected
int _selectedIndex = 0;

@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: const Text(大前端之旅),
),
// Show the bottom tab bar if screen width < 640
bottomNavigationBar: MediaQuery.of(context).size.width < 640
? BottomNavigationBar(
currentIndex: _selectedIndex,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.indigoAccent,
// called when one tab is selected
onTap: (int index)
setState(()
_selectedIndex = index;
);
,
// bottom tab items
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home), label: Home),
BottomNavigationBarItem(
icon: Icon(Icons.feed), label: Feed),
BottomNavigationBarItem(
icon: Icon(Icons.favorite), label: Favorites),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: Settings)
])
: null,
body: Row(
mainAxisSize: MainAxisSize.max,
children: [
// Show the navigaiton rail if screen width > = 640
if (MediaQuery.of(context).size.width > = 640)
NavigationRail(
minWidth: 55.0,
selectedIndex: _selectedIndex,
// Called when one tab is selected
onDestinationSelected: (int index)
setState(()
_selectedIndex = index;
);
,
labelType: NavigationRailLabelType.all,
selectedLabelTextStyle: const TextStyle(
color: Colors.amber,
),
leading: Column(
children: const [
SizedBox(
height: 8,
),
CircleAvatar(
radius: 20,
child: Icon(Icons.person),
),
],
),
unselectedLabelTextStyle: const TextStyle(),
// navigation rail items
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home), label: Text(Home)),
NavigationRailDestination(
icon: Icon(Icons.feed), label: Text(Feed)),
NavigationRailDestination(
icon: Icon(Icons.favorite), label: Text(Favorites)),
NavigationRailDestination(
icon: Icon(Icons.settings), label: Text(Settings)),
],
),

// Main content
// This part is always shown
// You will see it on both small and wide screen
Expanded(child: _mainContents[_selectedIndex]),
],
),
);


构造函数和引用【在 Flutter 中使用 NavigationRail 和 BottomNavigationBar】NavigationRail 构造函数：
NavigationRail(

    推荐阅读


    上一篇：全面解读 AWS Private 5G 的革新理念

    下一篇：#yyds干货盘点# 解决华为机试（配置文件恢复）