Flutter dialog嵌套ListView-蒲公英云

Flutter dialog嵌套ListView

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

实现效果如下：

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

代码：

///
/// 功能：
/// 描述：运费规则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;
  }
}