Flutter dialog嵌套ListView

- 日理万妓 2021-08-28 00:17 382阅读 0赞

实现效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
这里主要是实现弹框中的内容，因为不确定个数，又不能限制死宽高，百度了很久，搜了都是给定了一个宽高实现都，索性自己试了又试，终于弄了出来，故特意记录一下，粗略代码如下：

#### 代码： ####

///
    /// 功能：
    /// 描述：运费规则dialog
    /// crated by xudailong on 2020/3/8.
    ///
    class OrderFreightDialog extends Dialog{ 
    
      //标题默认高度
      double defaultTitleHeight = 40.0;
    
      List<FreightTplInfos> freightList = new List();
    
      OrderFreightDialog({ 
        Key key,
        @required this.freightList,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return new Padding(
          padding: const EdgeInsets.all(10.0),
          child: new Material(
            type: MaterialType.transparency,
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //白色背景
                new Container(
                  decoration: ShapeDecoration(
                    color: Color(0xffffffff),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(8.0),
                      ),
                    ),
                  ),
                  margin: const EdgeInsets.all(20),
                  padding: const EdgeInsets.only(bottom: 20),
                  child: new Column(
                    children: <Widget>[
                      //标题
                      new Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Container(
                          height: defaultTitleHeight,
                          child: Center(
                            child: new Text(
                              '运费模板',
                              style: new TextStyle(fontSize: 16.0, color: Color(0xff666666)),
                            ),
                          ),
                        ),
                      ),
                      (freightList==null || freightList.length ==0)?Container():SingleChildScrollView(
                        child: ListView(
                          shrinkWrap: true,
                          children: _buildFirstWidget(),
                        ),
                      ),
                      //底部的分隔线
                      GestureDetector(
                        child:  Container(
                          alignment: Alignment.center,
                          child: Text('知道了',style: TextStyle(fontSize: MyDimen.dp16,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont),),
                          height: MyDimen.dp40,
                          width: MyDimen.dp235,
                          decoration: BoxDecoration(
                              border: Border.all(color: MyColor.norFontColor,width: MyDimen.dot5),
                              borderRadius: BorderRadius.all(Radius.circular(40))
                          ),
                        ),
                        onTap: (){ 
                          Navigator.of(context).pop();
                        },
                        behavior: HitTestBehavior.opaque,
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    
      List<Widget> _buildFirstWidget(){ 
        List<Widget> data = new List();
        for(int i=0;i<freightList.length;i++){ 
          Widget firstContent = Container(
            padding: EdgeInsets.only(left: MyDimen.dp20,right: MyDimen.dp20,bottom: MyDimen.dp20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  child: Text.rich(
                    TextSpan(
                        text: '${freightList[i].titel}',
                        style: TextStyle(
                            fontSize: MyDimen.dp12,
                            color: MyColor.subFontColor,
                            fontWeight: FontWeight.w700),
                        children: <TextSpan>[
                          TextSpan(
                            text: ' ${freightList[i].totalWeightConent}',
                            style: TextStyle(
                                fontSize: MyDimen.dp12,
                                color: MyColor.norFontColor),
                          ),
                        ]),
                  ),
                  color: MyColor.divideLightLine
                ),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child:Container(
                    child: Row(
                      children: _buildImgs(freightList[i].imgs),
                    ),
                  ),
                ),
              ],
            ),
          );
    
          data.add(firstContent);
        }
    
        return data;
      }
    
      List<Widget> _buildImgs(List<String> imgs) { 
        List<Widget> mContent = new List();
        if(imgs == null || imgs.length==0){ 
          mContent.add(Container());
          return mContent;
        }
    
        for(int i=0;i<imgs.length;i++){ 
          Widget img =  Container(
            child:ClipRRect(
              child:  FadeInImage.assetNetwork(placeholder: ImageUtil.getLocalPath(ImageConstant.default_img), image: '${imgs[i]}',fit: BoxFit.cover,),
              borderRadius: BorderRadius.all(Radius.circular(6)),
            ),
            width: MyDimen.dp80,
            height: MyDimen.dp80,
            margin: EdgeInsets.only(right: MyDimen.dp12,top: 15,bottom: 15),
          );
    
    
          mContent.add(img);
        }
        return mContent;
      }
    }

更多文章可查看个人博客主页

[徐代龙的技术专栏][Link 1]

[Github搭建个人博客（2019最新版,亲测）][Github_2019]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/a333b5e8dd1d4b43b7871e003d71e09f.png
[Link 1]: https://blog.csdn.net/xudailong_blog
[Github_2019]: https://blog.csdn.net/xudailong_blog/article/details/78762262