Flutter 的向上弹框页面实现

Flutter 的向上弹框组件showModalBottomSheet

这个组件在使用向上弹框的时候还是比较方便的，但是如果我们要在弹框中更新信息的话就需要配合 StatefulBuilder 组件来实现了。现在的ui 是需要实现，弹框中的左边是一个菜单栏，右边是展示对应的内容。
先看我这边实现的效果，略微粗糙，可以自行调整。


实现代码，可以直接放在一个文件中运行，至于图片的资源可以自己替换成自己引入的。

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

class DialogPage extends StatefulWidget {

  const DialogPage({Key? key}) : super(key: key);
  @override
  _DialogPageState createState() => _DialogPageState();

}

class _DialogPageState extends State<DialogPage> {
  List menus = [
    {
      "flag":true,
      "name":"第一个",
      "imgUrl":"assets/images/bottlogo.png" //右侧的内容，可以是图片也可以是文字根据需求改变即可
    },
    {
      "flag":false,
      "name":"第二个",
      "imgUrl":"assets/images/facebook.png"
    },
    {
      "flag":false,
      "name":"第3个",
      "imgUrl":"assets/images/data_icon.png"
    },
    {
      "flag":false,
      "name":"第4个",
      "imgUrl":"assets/images/busd_logo.png"
    },
    {
      "flag":false,
      "name":"第5个",
      "imgUrl":"assets/images/block_chain.png"
    },
    {
      "flag":false,
      "name":"第6个",
      "imgUrl":"assets/images/bottlogo.png"
    },
  ];
  var curImg = "assets/images/bottlogo.png";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("向上弹框测试演示"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: (){
                showModalBottomSheet(
                    context:context,
                    builder:(BuildContext context){
                      return StatefulBuilder(
                          //在这里为了区分，在构建builder的时候将setState方法命名为了setBottomSheetState。
                        builder:(context1, setBottomSheetState) {
                        return Container(
                          height: 300,
                          child:Row(
                            children: [
                              Container(
                                width: 100,
                                height: 300,
                                decoration: BoxDecoration(
                                    color: Colors.grey,
                                    borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),topRight: Radius.circular(10.0))
                                ),
                                child: ListView.builder(
                                    itemCount: menus.length,
                                    itemBuilder: (context,index){
                                      return GestureDetector(
                                        child: Container(
                                          color:menus[index]["flag"]?Colors.white: Colors.grey,
                                          padding: EdgeInsets.only(top: 20,bottom: 20),
                                          alignment: Alignment.center,
                                          child: Text("第$index个"),
                                        ),
                                        onTap: (){
                                          setBottomSheetState(() {
                                            print("点击了${menus[index]["flag"]}=====$index");
                                            menus[index]["flag"]=!menus[index]["flag"];
                                            for(var j =0; j < menus.length;j++){
                                              if(j!=index){
                                                menus[j]["flag"] = false;
                                              }
                                            }
                                            curImg = menus[index]["imgUrl"];

                                          });
                                        },
                                      );
                                    }),
                              ),
                              Container(
                                alignment: Alignment.center,
                                child: Image.asset(
                                    curImg
                                ),
                              )
                            ],
                          ),
                        );
                    }
                   );
               }
              );
            },
                child: Text("点击弹框原生来写")
            )
          ],
        ),
      ),
    );
  }
}