flutter Drawer 侧边栏、以及侧边栏内 容布局

1. Flutter Drawer 侧边栏

// 在Scaffold组件内,通过传入drawer参数可以定义左侧的边栏,而通过endDrawer则可以定义右侧边栏。
// 默认情况下,侧边栏是隐藏的。可以通过手势滑动或点击按钮来显示。
return Scaffold(
    appBar: AppBar(
        title: Text("Flutter App"),
    ),
    drawer: Drawer(
        child: Text('左侧边栏'),
    ),
    endDrawer: Drawer(
        child: Text('右侧侧边栏'),
    ),
);

2. DrawerHeader 的常见属性

// DrawerHeader组件具有以下常见属性:
// - decoration: 设置顶部背景颜色
// - child: 配置子元素
// - padding: 内边距
// - margin: 外边距

3. Flutter UserAccountsDrawerHeader 的属性

// UserAccountsDrawerHeader是一个特殊的DrawerHeader,具有以下属性:
// - decoration: 设置顶部背景颜色
// - accountName: 显示账户名称
// - accountEmail: 显示账户的电子邮件地址
// - currentAccountPicture: 显示用户的当前头像
// - otherAccountsPictures: 用来显示当前用户的其他账户头像
// - margin: 外边距

4. Flutter 侧边栏路由跳转

// 当点击侧边栏的某一项时,可以使用以下方法进行路由跳转:
onTap: (){
    Navigator.of(context).pop();
    Navigator.pushNamed(context, '/search');
}

5. 侧边栏案例代码

// 以下是一个完整的侧边栏使用案例,其中包含了UserAccountsDrawerHeader和路由跳转的实现:
import 'package:flutter/material.dart';
import '../home.dart';

class My extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            drawer: Drawer(
                child: Column(
                    children: <Widget>[
                        UserAccountsDrawerHeader(
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: NetworkImage("https://www.itying.com/images/flutter/2.png"), 
                                    fit: BoxFit.cover
                                )
                            ),
                        ),
                        ListTile(
                            title: Text('123'),
                            leading: Icon(Icons.home),
                            onTap: () {
                                Navigator.of(context).pushAndRemoveUntil(
                                    MaterialPageRoute(builder: (context) => Home(index: 1)), 
                                    (route) => route == null
                                );
                            },
                        ),
                        ListTile(
                            title: Text('123'),
                            leading: Icon(Icons.home),
                            onTap: () {
                                Navigator.of(context).pushAndRemoveUntil(
                                    MaterialPageRoute(builder: (context) => Home(index: 2)), 
                                    (route) => route == null
                                );
                            },
                        ),
                    ],
                ),
            ),
            endDrawer: Drawer(
                child: Text('右侧'),
            ),
        );
    }
}

posted on 2020-02-21 20:14  完美前端  阅读(1000)  评论(0)    收藏  举报

导航