Flutter学习之Dawer抽屉组件与Floating Button集成

最新推荐文章于 2024-08-13 08:37:44 发布

Wayfreem

最新推荐文章于 2024-08-13 08:37:44 发布

阅读量634

点赞数

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/qq_18948359/article/details/95733945

版权

Flutter 专栏收录该内容

18 篇文章 5 订阅

订阅专栏

简介

Drawer 组件可以实现类似抽屉拉出推入的效果，一般是制作从侧边栏拉出导航面板。通常 Drawer 是和 ListView 组件组合使用的。
Floating Button 对应一个圆形图标按钮，悬停在内容之上，以展示应用程序中的主要动作，所以非常醒目。

实现的效果

详细说明

Drawer 组件可以添加头部效果，用以下两个组件可以实现：

Drawer Header ：展示基本信息。

DrawerHeader 组件属性说明
属性名	类型	说明
decoration	Decoration	header 区域的 decoration ，通常用来设置背景颜色或者背景图片
curve	Curve	如果 decoration 发生了变化，则会使用curve 设置的变化曲线和 duration 设置的动因时间来做一个切换动画
child	Widget	Header 里面所显示的内容控件
padding	EdgeInsetsGeometry	Header 里面内容控件的 padding 值，如果 child 为 null，则这个值无效
margin	EdgeInsetsGeometry	Header 四周的间隙

UserAccountsD rawerHeader ：展示用户头像、用户名、Email 等信息。

UserAccountsDrawerHeader 详细说明
属性名	类型	说明
margin	EdgeInsetsGeometry	Header 四周的间隙
decoration	Decoration	header 区域的 decoration ，通常用来设置背景颜色或者背景图片
currentAccountPicture	Widget	用来设置当前用户的头像
otherAccountsPictures	List<Widget>	用来设置当前用户其他账号的头像
accountName	Widget	当前用户的名字
accountEmail	Widget	当前用户的Email
onDetailsPressed	VoidCalIback	当accountN ame 或者acco untEmail 被点击的时候所触发的回调函数，可以用来显示其他额外的信息

具体实现

我们将需要展示出来的两个组件 floatingButton 与 drawer 组件单独出来，然后放置到需要展示的组件上面（当前的APP），这样子避免所有的代码写在一起，方便于维护与阅读。

创建一个 FloatingButton 组件

// 将浮动按钮抽取为单独的一个 widget 
class FloatingButton extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new Builder(builder: (BuildContext context){
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          // 提示信息
          tooltip: "请点击 FloatingActionButton",
          foregroundColor: Colors.white,    // 前景色
          backgroundColor: Colors.blue,     // 背景色
          elevation: 10.0,                  // 未点击阴影值
          highlightElevation: 10.0,         // 点击阴影值
          onPressed: (){
            Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎点击')));
            
          },
          mini: false,                      // 如果设置为true 图标显示会特别小
          shape: new CircleBorder(),        // 圆形边
          isExtended: true,
        );
      },); 
   }
}

创建一个 DrawerWidget 组件

// 将 drawer 抽屉组件抽取为一个单独的 widget
class DrawerWidget extends StatelessWidget{

  final String imageUrl;
  // 图片展示的地址从外面传入
  const DrawerWidget(this.imageUrl);

  @override
  Widget build(BuildContext context){
    return new Drawer(
        child: ListView(
          children: <Widget>[
            // 设置用户信息 头像、用户名、Email 等
            UserAccountsDrawerHeader(
              accountName: new Text('Wayfreem'),
              accountEmail: new Text('wayfreem@163.com'),
              // 设置当前的头像
              currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
              onDetailsPressed: (){ print('瞎JB点击'); },

              // 属性本来是用来设置当前用户的其他账号的头像，这里用来当 QQ 二维码图片展示
              otherAccountsPictures: <Widget>[new Container( child: Image.network(imageUrl),)],
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),),
              title: Text("个性装扮"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo),),
              title: Text("我的相册"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),),
              title: Text("免流量特权"),
            ),
            
          ],  
        ),
      );
  }
}

最后拼接到一起

void main() => runApp(new MaterialApp(
  title: 'Drawer 抽屉组件',
  home: new LayoutDemo(),
));

class LayoutDemo extends StatelessWidget{

  String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Drawer 抽屉组件'),),
      drawer: new DrawerWidget(imageUrl),
      // 主体区域放置一个文本显示
      body: Center(
        child: Text('floating button', style: new TextStyle(fontSize: 28),),
      ),

      // 放置一个浮动的按钮
      floatingActionButton: FloatingButton(),
      // 浮动按钮的放置位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );
  }
}

附完整的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
  title: 'Drawer 抽屉组件',
  home: new LayoutDemo(),
));

class LayoutDemo extends StatelessWidget{

  String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Drawer 抽屉组件'),),
      drawer: new DrawerWidget(imageUrl),
      // 主体区域放置一个文本显示
      body: Center(
        child: Text('floating button', style: new TextStyle(fontSize: 28),),
      ),

      // 放置一个浮动的按钮
      floatingActionButton: FloatingButton(),
      // 浮动按钮的放置位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );
  }
}

// 将 drawer 抽屉组件抽取为一个单独的 widget
class DrawerWidget extends StatelessWidget{

  final String imageUrl;

  const DrawerWidget(this.imageUrl);

  @override
  Widget build(BuildContext context){
    return new Drawer(
        child: ListView(
          children: <Widget>[
            // 设置用户信息 头像、用户名、Email 等
            UserAccountsDrawerHeader(
              accountName: new Text('Wayfreem'),
              accountEmail: new Text('wayfreem@163.com'),
              // 设置当前的头像
              currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
              onDetailsPressed: (){ print('瞎JB点击'); },

              // 属性本来是用来设置当前用户的其他账号的头像，这里用来当 QQ 二维码图片展示
              otherAccountsPictures: <Widget>[new Container( child: Image.network(imageUrl),)],
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),),
              title: Text("个性装扮"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo),),
              title: Text("我的相册"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),),
              title: Text("免流量特权"),
            ),
            
          ],  
        ),
      );
  }
}

// 将浮动按钮抽取为单独的一个 widget 
class FloatingButton extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new Builder(builder: (BuildContext context){
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          // 提示信息
          tooltip: "请点击 FloatingActionButton",
          foregroundColor: Colors.white,    // 前景色
          backgroundColor: Colors.blue,     // 背景色
          elevation: 10.0,                  // 未点击阴影值
          highlightElevation: 10.0,         // 点击阴影值
          onPressed: (){
            Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎点击')));
            
          },
          mini: false,                      // 如果设置为true 图标显示会特别小
          shape: new CircleBorder(),        // 圆形边
          isExtended: true,
        );
      },); 
   }
}