Tab với thanh điều hướng

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 23 trên 33.

Nhiều ứng dụng đặt các trang chính trong các thẻ ở dưới cùng màn hình. NavigationBar hiển thị chúng; bạn truyền nó vào bottomNavigationBar: của Scaffold.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (int i) {
    setState(() {
      index = i;
    });
  },
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

Mỗi NavigationDestination là một thẻ, gồm một biểu tượng và nhãn. selectedIndex cho biết thẻ nào đang được tô sáng, bắt đầu đếm từ 0. Khi bạn nhấn vào một thẻ, onDestinationSelected nhận chỉ số của thẻ đó.

Thanh điều hướng không tự ghi nhớ thẻ: bạn lưu index trong trạng thái và thay đổi nó bằng setState. Phần thân hiển thị trang tương ứng với chỉ số đó, ở đây là pages[index] trong một danh sách widget.

Thử thách

Dễ

Thanh có ba thẻ, nhưng chạm vào chúng không có tác dụng. Thêm onDestinationSelected: để thẻ được chọn sáng lên và trang tương ứng hiển thị: Favorites page khi chọn Favorites, Settings page khi chọn Settings.

Tự làm thử

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int index = 0;
  final List<Widget> pages = const [
    Center(child: Text('Home page')),
    Center(child: Text('Favorites page')),
    Center(child: Text('Settings page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My App')),
      body: pages[index],
      bottomNavigationBar: NavigationBar(
        selectedIndex: index,
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}