Flutter实战之旅：构建常用页面框架指南

2023-12-18 05:38:00

在Flutter的浩瀚世界中，底部导航栏可谓是构建流畅用户体验的基石。本指南将深入探讨如何使用BottomNavigationBar和IndexedStack组件，打造一个实用且灵活的页面框架。

认识BottomNavigationBar

BottomNavigationBar是一个多功能组件，可以轻松地在应用底部添加导航选项卡。它提供了一种直观的导航方式，允许用户在不同页面之间无缝切换。

使用BottomNavigationBar

在Flutter代码中引入BottomNavigationBar组件：

import 'package:flutter/material.dart';

创建一个BottomNavigationBar实例，并指定要显示的项目：

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '主页',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: '设置',
    ),
  ],
);

巧用IndexedStack

IndexedStack组件可用于在单个视图中显示多个子视图，并根据当前选定的索引在它们之间切换。

使用IndexedStack

在Flutter代码中引入IndexedStack组件：

import 'package:flutter/material.dart';

创建一个IndexedStack实例，并指定要显示的子视图：

IndexedStack(
  index: _selectedIndex,
  children: [
    HomePage(),
    SettingsPage(),
  ],
);

构建页面框架

在Flutter应用的build方法中，将BottomNavigationBar和IndexedStack结合起来：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: IndexedStack(
      index: _selectedIndex,
      children: [
        HomePage(),
        SettingsPage(),
      ],
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: '主页',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: '设置',
        ),
      ],
      currentIndex: _selectedIndex,
      onTap: (index) {
        setState(() {
          _selectedIndex = index;
        });
      },
    ),
  );
}