关于flutter:Flutter学习第三课侧边栏Drawer的抽屉组件简单用法

一：第一步：主界面链接到 MainApp()

import 'package:flutter/material.dart';
import 'package:flutter_first/main/main_app.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: "Drawer 抽屉组件示例",
      home: new MainApp(),);
  }
}

二：抽屉组件界面

import 'package:flutter/material.dart';

class MainApp extends StatefulWidget {const MainApp({Key? key}) : super(key: key);

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("Drawer 抽屉组件示例"),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            // 设置用户信息，如头像，用户名，Emails
            UserAccountsDrawerHeader(accountName: new Text("Rocky_ruan"),
              accountEmail: new Text("ruanzhiqiang_cnstrong@163.com"),
              // 设置以后用户头像
              currentAccountPicture: new CircleAvatar(backgroundImage: new AssetImage("lib/assets/images/photo.jpg"),
              ),
              onDetailsPressed: () {},

              // 属性原本是用来设置以后的其余头像
              otherAccountsPictures: <Widget>[
                new Container(
                  child: ClipOval(
                      child: Image.asset("lib/assets/images/photo.png",
                          height: 200, width: 200, fit: BoxFit.cover)),
                ),
              ],
            ),

            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),
              ),
              title: Text("共性打扮"),
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo),
              ),
              title: Text("我的相册"),
            ),
            ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),
              ),
              title: Text("免流量特权"),
            )
          ],
        ),
      ),
    );
  }
}

这外面用到了图片资源是从 assets 资产目录拿到了要建设一个资产目录

同时 pubspec.yaml 文件下要增加 assets 目录配置

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - lib/assets/images/

上面这个是栗子