Flutter 开发类似Android PopupWindow 效果的分享弹出页面

在学习Flutter 的过程中，你会需要处理类似Android PopupWindow 效果的分享弹出页面。看起来是一个非常简单的页面，但是有很多东西值得尝试。

小菜主要使用GridView和BottomSheet进行测试。当然，没有GridView也可以使用GridView。小菜简单介绍一下这两套小玩意。

GridView

GridView 我们都很熟悉了。它是日常生活中最常用的控件之一。小菜前段时间学习了ListView的基本使用。使用GridView基本是一样的。小菜就不多说了。 ，仅回忆一个用于设置 GridView 元素的基本属性的属性。

const SliverGridDelegateWithFixedCrossAxisCount({
   @required this.crossAxisCount, // 每行 item 个数
   this.mainAxisSpacing = 0.0,    // 列间距，即 item 左右间距
   this.crossAxisSpacing = 0.0,   // 行间距，即 item 上下间距
   this.childAspectRatio = 1.0,   // item 宽高比，默认1:1
})

提示。注意设置项目数和列间距。如果太大，可能会导致异常情况，例如显示页面不完整。

BottomSheet

底部工作表是从底部弹出的工作表。主要分为两种：

样式工作表：类似全新的工作表，完整展示；

@override
Widget build(BuildContext context) {
return new Scaffold(
    appBar: new AppBar(
      title: new Text("分享页面"),
    ),
    body: new Center(
      child: new Builder(builder: (BuildContext context) {
        return new FlatButton(
            onPressed: () {
              showBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return _showNomalWid(context);
                  });
            },
            child: new Text("我要分享"),
            color: );
      }),
    ));
}

Widget _showNomalWid(BuildContext context) {
    return new Container(
//      height: 320.0,
//      color: Colors.greenAccent,
      child: new GridView.builder(
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4, mainAxisSpacing: 5.0, childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          return new Column(
            children: <Widget>[
              new Padding(
                padding: (0.0, 6.0, 0.0, 6.0),
                child: new Image.asset(
                  'images/${urlItems[index]}', width: 50.0, height: 50.0, fit: BoxFit.fill,
                ),
              ),
              new Text(nameItems[index])
            ],
          );
        },
        itemCount: ,
      ),
    );
}

当您使用 showBottomSheet 方法打开工作表时，内容小部件不限制宽度或高度。结果打开了新的一页。点击空白区域不会消失，如图：

如果你现在设置内容小部件的宽度和高度，你会看到页面仍然重新打开。高度从下到上占据指定高度，点击空白区域不消失，如图：

式工作表：这是一个半透明的工作表，占了一半默认屏幕。

@override
Widget build(BuildContext context) {
return new Scaffold(
    appBar: new AppBar(
      title: new Text("分享页面"),
    ),
    body: new Center(
      child: new Builder(builder: (BuildContext context) {
        return new FlatButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return _showNomalWid(context);
                  });
            },
            child: new Text("我要分享"),
            color: );
      }),
    ));
}

如果您使用 showModalBottomSheet 打开工作表，并且内容小部件不限制宽度或高度，则结果将是默认情况下占据一半屏幕的透明工作表。点击空白区域，工作表就会消失，如图：

如果是这样的话，当你设置内容小部件的宽度和高度时，你会看到半透明的工作表是仍然打开，高度会占据指定高度以下的高度，点击后空白区域就会消失，如图：

如果设置了内容小部件的数据量这个时候有很多，效果怎么样呢？因此，小菜决定使用GridView。只需在现有宽度和高度内滑动即可如图：

核心源码
小菜稍微改变了页面效果。主要源码如下：

import 'package:flutter/';

class SharePopup extends StatelessWidget {
  List<String> nameItems = <String>[
    '微信', '朋友圈', 'QQ', 'QQ空间', '微博', 'FaceBook', '邮件', '链接'
  ];
  List<String> urlItems = <String>[
    '', '', '', '',
    '', '', '', ''
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("分享页面"),
        ),
        body: new Center(
          child: new Builder(builder: (BuildContext context) {
            return new FlatButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (BuildContext context) {
                        return _shareWidget(context);
                      });
                },
                child: new Text("我要分享"),
                color: );
          }),
        ));
  }

  Widget _shareWidget(BuildContext context) {
    return new Container(
      height: 250.0,
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: (0.0, 10.0, 0.0, 0.0),
            child: new Container(
              height: 190.0,
              child: new GridView.builder(
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 5.0,
                    childAspectRatio: 1.0),
                itemBuilder: (BuildContext context, int index) {
                  return new Column(
                    children: <Widget>[
                      new Padding(
                        padding: (0.0, 6.0, 0.0, 6.0),
                        child: new Image.asset( 'images/${urlItems[index]}', width: 50.0, height: 50.0, fit: BoxFit.fill, ) ),
                      new Text(nameItems[index])
                    ],
                  );
                },
                itemCount: ,
              ),
            ),
          ),
          new Container( height: 0.5, color: Grey, ),
          new Center( child: new Padding(
              padding: (0.0, 8.0, 0.0, 8.0),
              child: new Text( '取  消', style: new TextStyle(fontSize: 18.0, color: Grey), ) ), )
        ],
      ),
    );
  }
}