在螢幕上新增側邊欄

在使用 Material Design 的應用程式中，有兩種主要的導覽選項：索引標籤和側邊欄。當空間不足以支援索引標籤時，側邊欄提供了一個方便的替代方案。

在 Flutter 中，結合使用 Drawer 小工具和 Scaffold 來建立具有 Material Design 側邊欄的版面配置。此食譜使用下列步驟

1. 建立一個 Scaffold。
2. 新增一個抽屜。
3. 在抽屜中填入項目。
4. 以程式方式關閉抽屜。

若要將抽屜新增至應用程式，請將其包在 Scaffold 小工具中。Scaffold 小工具為遵循 Material Design 指南的應用程式提供一致的視覺結構。它還支援特殊的 Material Design 元件，例如抽屜、應用程式列和快顯通知。

在此範例中，建立一個帶有 drawer 的 Scaffold

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar without hamburger button'),
  ),
  drawer: // Add a Drawer here in the next step.
);

現在將抽屜新增至 Scaffold。抽屜可以是任何小工具，但最好使用 material 函式庫中的 Drawer 小工具，它符合 Material Design 規範。

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  ),
);

現在您已經有了 Drawer，請在其中新增內容。在此範例中，使用 ListView。雖然您可以使用 Column 小工具，但 ListView 非常方便，因為如果內容佔用的空間超過螢幕支援的大小，它允許使用者在抽屜中捲動。

使用 DrawerHeader 和兩個 ListTile 小工具填入 ListView。如需更多關於使用清單的資訊，請參閱清單食譜。

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

通常，您不需要編寫任何程式碼來開啟 drawer，因為當 leading 小工具為 null 時，AppBar 中的預設實作是 DrawerButton。

但如果您想要自由控制 drawer。您可以使用 Builder 呼叫 Scaffold.of(context).openDrawer() 來達成此目的。

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the last step.
  ),
);

在使用者點擊項目後，您可能想要關閉抽屜。您可以使用 Navigator 來達成此目的。

當使用者開啟抽屜時，Flutter 會將抽屜新增至導覽堆疊。因此，要關閉抽屜，請呼叫 Navigator.pop(context)。

ListTile(
  title: const Text('Item 1'),
  onTap: () {
    // Update the state of the app
    // ...
    // Then close the drawer
    Navigator.pop(context);
  },
),

此範例顯示 Drawer 在 Scaffold 小工具中如何使用。Drawer 有三個 ListTile 項目。_onItemTapped 函數會變更所選取項目的索引，並在 Scaffold 的中心顯示對應的文字。

import 'package:flutter/material.dart';

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

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

  static const appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            );
          },
        ),
      ),
      body: Center(
        child: _widgetOptions[_selectedIndex],
      ),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Home'),
              selected: _selectedIndex == 0,
              onTap: () {
                // Update the state of the app
                _onItemTapped(0);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Business'),
              selected: _selectedIndex == 1,
              onTap: () {
                // Update the state of the app
                _onItemTapped(1);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('School'),
              selected: _selectedIndex == 2,
              onTap: () {
                // Update the state of the app
                _onItemTapped(2);
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新於 2024-06-26。 檢視原始碼 或 回報問題。