Flutter的左侧滑菜单可以通过Scaffold的drawer属性来实现。下面是一个简单的左侧滑菜单示例代码:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('左侧滑菜单示例'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                '左侧滑菜单',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('菜单项 1'),
              onTap: () {
                // 点击菜单项时的处理
              },
            ),
            ListTile(
              title: Text('菜单项 2'),
              onTap: () {
                // 点击菜单项时的处理
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('主要内容区域'),
      ),
    );
  }
}

在上面的示例中,我们定义了一个Scaffold,并将drawer属性设置为一个Drawer组件。Drawer组件包含了一个ListView,其中包含了若干个菜单项。DrawerHeader组件用于显示菜单的标题。当用户点击菜单项时,可以在对应的onTap回调函数中进行处理。主要内容区域可以通过body属性来设置。

flutter写一个左侧滑菜单

原文地址: https://www.cveoy.top/t/topic/btHd 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录