Flutter实现自定义底部弹框分享

桃扇骨 2021-06-30 09:53 764阅读 0赞

![在这里插入图片描述][2019070923581277.gif]

如图，主要是为了实现图中的效果，第一次录制视频，还请海涵

flutter的这种弹框，我们用到了`showModalBottomSheet`这个类，使用的是这个类，说得挺详细的

另外把从发布按钮的代码给全部放上来。

void showPub() { 
        showModalBottomSheet(
            context: context,
            builder: (BuildContext context) { 
              return _shareWidget();
            });
      }
    
    
     Widget _shareWidget() { 
        return new Container(
          height: 250.0,
          child: new Column(
            children: <Widget>[
              new Padding(
                padding: EdgeInsets.fromLTRB(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: EdgeInsets.fromLTRB(0.0, 6.0, 0.0, 6.0),
                              child: Icon(
                                Icons.ac_unit,
                                size: 50,
                              )),
                          new Text(nameItems[index])
                        ],
                      );
                    },
                    itemCount: nameItems.length,
                  ),
                ),
              ),
              new Container(
                height: 0.5,
                color: Colors.blueGrey,
              ),
              new Center(
                child: new Padding(
                  padding: EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
                  child: GestureDetector(
                    onTap:(){ 
                      Navigator.of(context).pop();
                    },
                      child: new Text(
                    '取 消',
                    style: new TextStyle(fontSize: 18.0, color: Colors.blueGrey),
                  )),
                ),
              ),
            ],
          ),
        );
    
      }
    
    
    
    
      List<String> nameItems = <String>[
        '微信',
        '朋友圈',
        'QQ',
        'QQ空间',
        '微博',
        'FaceBook',
        '邮件',
        '链接'
      ];
    
    // 这个urlItems这里没有用到
      List<String> urlItems = <String>[
        'xz.png',
        'xz.png',
        'xz.png',
        'xz.png',
        'xz.png',
        'xz.png',
        'xz.png',
        'xz.png'
      ];

--------------------

[2019070923581277.gif]: /images/20210529/d6892d31415346b5968f4cc07d5e5529.png