Flutter UI基础 - 侧拉抽屉菜单

在移动开发中，我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣，这样才算得上好的 UI 设计。这件我们在 Scaffold 通常是上下结构，头部是标题栏下面主界面。

 

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(title: Text(title),),
    body: Center(child: Text('$title Demo'),),
  ),
 ),
);

Scaffold 除了 appBar 和 body 属性以为还有 drawer 属性方便我们定义侧边抽屉。

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(title: Text(title),),
    body: Center(child: Text('$title Demo'),),
    drawer: Drawer(
    )
    ),
  ),
);

这样便可以在 child 为侧拉抽屉添加内容，内容是添加一个列表。DrawerHeader 添加标题栏。然后 decoration 中添加背景颜色。然后通过 ListTile 组件来添加一条一条内容

child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('$title Demo'),
          decoration: BoxDecoration(
            color: Colors.blue
          ),
        ),
        ListTile(
          title: Text("React"),
          onTap: (){
            Navigator.pop(context);
          },
        ),
        ListTile(
           title: Text("Vue"),
           onTap: (){
            Navigator.pop(context);
           },
        )
      ],
),

为 ListTile 添加 onTap 事件来通过 Navigator 返回到主界面。

 ListTile(
      title: Text("Vue"),
      onTap: (){
        Navigator.pop(context);
      },
 )

完整代码

import 'package:flutter/material.dart';

class DrawerApp extends StatelessWidget{

  final appTitle = "侧滑抽屉";

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

class MyHomePage extends StatelessWidget{
  final String title;
  MyHomePage({Key key,this.title}):super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(title),),
      body: Center(child: Text('$title Demo'),),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('$title Demo'),
              decoration: BoxDecoration(
                color: Colors.blue
              ),
            ),
            ListTile(
              title: Text("React"),
              onTap: (){
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text("Vue"),
              onTap: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}