Flutter dialog嵌套ListView

实现效果如下:

Flutter dialog嵌套ListView_第1张图片
这里主要是实现弹框中的内容,因为不确定个数,又不能限制死宽高,百度了很久,搜了都是给定了一个宽高实现都,索性自己试了又试,终于弄了出来,故特意记录一下,粗略代码如下:

代码:

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

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

徐代龙的技术专栏

Github搭建个人博客(2019最新版,亲测)

你可能感兴趣的:(Flutter开发)