Flutter中的BottomNavigationBar：底部导航栏的实现

Flutter中的BottomNavigationBar：底部导航栏的实现

5 回复

使用BottomNavigationBar widget，设置其items属性和当前选中项索引。

更多关于Flutter中的BottomNavigationBar：底部导航栏的实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用BottomNavigationBar组件实现底部导航栏。需定义items设置导航项，并通过currentIndex和onTap控制选中项和点击事件。

在Flutter中，BottomNavigationBar 是一个常用的Widget，用于创建底部导航栏。它通常与 Scaffold 的 bottomNavigationBar 属性结合使用。以下是一个简单的实现示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BottomNavigationBar Example')),
      body: Center(
        child: Text('Selected Index: $_selectedIndex'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Business'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
        ],
      ),
    );
  }
}

在这个示例中，BottomNavigationBar 包含了三个导航项，点击每个项时会更新 _selectedIndex 并显示对应的内容。

使用BottomNavigationBar Widget，设置其items属性和当前选中项currentIndex。

在Flutter中，BottomNavigationBar 是一个常用的组件，用于在应用的底部显示导航栏。它通常与 PageView 或 TabBarView 结合使用，以实现页面之间的切换。以下是一个简单的 BottomNavigationBar 实现示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNavigationBar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Search Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Profile Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

代码说明：

  1. BottomNavigationBar：定义了底部导航栏的布局和项目。

    • items：导航栏的项目列表，每个项目包含一个图标和标签。
    • currentIndex：当前选中的项目索引。
    • selectedItemColor：选中项目的颜色。
    • onTap：当用户点击某个项目时触发的回调函数。

  2. _onItemTapped：当用户点击导航栏中的某个项目时，更新 _selectedIndex 并刷新 UI。

  3. _widgetOptions：根据 _selectedIndex 显示不同的页面内容。

运行效果：

应用启动后，底部导航栏显示三个项目：Home、Search 和 Profile。点击不同的项目，页面内容会相应切换。

你可以根据需要自定义导航栏的样式和行为，例如添加更多项目、更改图标、调整颜色等。

回到顶部