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("[e-mail]"),
              //设置当前用户头像
              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/

下面这个是栗子