Flutter Navigation drawer 导航抽屉（翻译）

这篇文章距离上次修改已过273天，其中的内容可能已经有所变动。

在Flutter中，创建一个Navigation Drawer通常涉及使用Drawer组件，并在其中放置一个ListView来列出可点击的导航项。以下是一个简单的例子：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Navigation Drawer Example'),
        ),
        drawer: Drawer(
          // 导航抽屉的内容
          child: ListView(
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountName: Text('John Doe'),
                accountEmail: Text('johndoe@example.com'),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: NetworkImage('https://example.com/profile.jpg'),
                ),
              ),
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Home'),
                onTap: () {
                  // 处理点击事件，例如导航到新的页面或者关闭抽屉
                  Navigator.of(context).popAndPushNamed('/home');
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  // 处理点击事件
                  Navigator.of(context).popAndPushNamed('/settings');
                },
              ),
              // 可以添加更多的ListTile项...
            ],
          ),
        ),
        body: Center(
          child: Text('This is the main body'),
        ),
      ),
    );
  }
}

在这个例子中，我们定义了一个MyApp类，它是一个StatelessWidget。在build方法中，我们创建了一个MaterialApp作为根部件，并且在Scaffold中定义了一个AppBar和一个Drawer。Drawer里面包含一个ListView，其中包含UserAccountsDrawerHeader来展示用户信息和一个可以关闭抽屉的ListTile列表。每个ListTile都设置了点击事件的处理函数，这里是导航到新的页面（通过路由名称）。这样就创建了一个基本的Navigation Drawer。

Flutter Navigation drawer 导航抽屉（翻译）

评论已关闭

推荐阅读