Flutter macOS Drawer Widget 实现抽屉组件

2024-01-11 18:08:08

Flutter macOS Drawer Widget 示例

前言

Flutter macOS Drawer Widget 是一种抽屉组件，可用来实现抽屉式导航，从屏幕侧面滑出，主要用于在 macOS 应用程序中提供额外的导航和菜单选项。在本文中，我们将通过一个简单的示例来演示如何使用 Flutter macOS Drawer Widget。

Drawer Widget 示例

要创建一个抽屉组件，我们需要使用 Drawer Widget。Drawer Widget 有很多属性，可以用来控制抽屉的各种外观和行为。在下面的示例中，我们使用 Drawer Widget 创建了一个简单的抽屉组件，并将其添加到应用程序的主视图中：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer Widget Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer Widget Example'),
      ),
      body: Center(
        child: Text('This is the main content.'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}