2021年Flutter中的抽屉组件Drawer

duanshuiLu点抗母

于 2021-03-24 12:19:18 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_36824777/article/details/115171063

1. 配置抽屉组件

1. drawer 左侧抽屉；

2. endDrawer 右侧抽屉；

代码示例：

import "package:flutter/material.dart";
 
 
class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}
 
class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text("Flutter App"), 
            ),
            // 左侧抽屉
            drawer: Drawer(
                child: Text('左侧抽屉'), 
            ),
            // 右侧抽屉
            endDrawer: Drawer(
                child: Text('右侧抽屉'), 
            ), 
        );
    }
}

2. 抽屉头 DrawerHeader

常见的属性如下：

1. decoration 装饰；

2. child 子组件；

代码示例：

import "package:flutter/material.dart";
 
 
class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}
 
class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
 
        return Scaffold(
            appBar: AppBar(
                title: Text("Flutter App"), 
            ),
 
            // 左侧抽屉
            drawer:Drawer(
                child: Column(
                    children: <Widget>[
                        Row(
                            children:<Widget>[
                                Expanded(
                                    // 自定义抽屉头
                                    child:DrawerHeader(
                                        child:Text("我的抽屉"),
                                        // 装饰
                                        decoration: BoxDecoration(
                                            // 背景颜色
                                            color: Colors.yellow,
                                            // 图片
                                            image: DecorationImage(
                                                image: NetworkImage("https://www.itying.com/images/fl