实现效果如下:
这里主要是实现弹框中的内容,因为不确定个数,又不能限制死宽高,百度了很久,搜了都是给定了一个宽高实现都,索性自己试了又试,终于弄了出来,故特意记录一下,粗略代码如下:
///
/// 功能:
/// 描述:运费规则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最新版,亲测)