Flutter学习-自定义列表单元组件

参数说明

参数	默认值	说明
id	—	回调函数关联主键
title	—	列表单元标题
color	Colors.black	列表单元标题颜色
TfontWeight	FontWeight.w500	列表单元标题字体粗细
Tsize	18	列表单元标题字号大小
desc	The msg is the Desc !	列表单元备注信息
dcolor	Colors.black38	列表单元备注信息颜色
imgpath		列表单元图像
rightIcon	Icons.more_horiz	列表单元右侧点击图标
onPressed		列表单元右侧点击图标回调函数
onTap		列表单元点击回调函数

使用参考

widget.DataForm = [
	{
	'id': 1,
	'title': 'test',
	'code': '001',
	'descshow':'The msg is the Desc !',
	'imgpath': 'https://www.eatqionline.top:8008/media/img/logo/maifeng_dgHndBi.png'
	}
]
_MakeList() {
    List<Widget> theList = [];
    theList = [
      SizedBox(height: widget.FrontHeight,),// 前置高度
    ];
    for(var item in widget.DataForm) {
      theList.add(MyWaresListElement(
        title:item['title'],
        code:item['code'],
        color: Colors.black,
        TfontWeight:FontWeight.w500,// FontWeight.bold,18,
        Tsize:18,
        desc:item['descshow'],// 'The msg is the Desc !',
        dcolor:Colors.black38,// Colors.black38,
        imgpath:item['imgpath'],
        id:item['id'],
        onPressed:(){widget.onPressed(item);},// (){MyToast.success2(item['id'].toString());},
        onTap:(){widget.onTap(item['id']);},// onTap: (){MyToast.success2('点击' + item['id'].toString());},
      ));
    }
    theList.add(SizedBox(height: 50,));
    return theList;
  }

效果图

列表单元组件代码

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

class MyWaresListElement extends StatefulWidget {
  // 传入参数
  const MyWaresListElement({
    Key? key,
    required this.id,// 列表单元中对应数据List的id
    required this.title,// 列表单元标题
    this.color: Colors.black,// 列表单元标题颜色
    this.TfontWeight: FontWeight.w500,// 列表单元标题字体粗细
    this.Tsize:18,// 列表单元标题字号大小
    this.desc: 'The msg is the Desc !',// 列表单元备注信息
    this.dcolor: Colors.black38,// 列表单元备注信息颜色
    required this.imgpath,// 列表单元图像
    this.rightIcon: Icons.more_horiz,// 列表单元右侧点击图标
    required this.onPressed,// 列表单元右侧点击图标回调函数
    required this.onTap,// 列表单元点击回调函数
    this.code:'',
  }) : super(key: key,);
  final int id;
  final String title;
  final String code;
  final Color color;
  final FontWeight TfontWeight;
  final double Tsize;
  final String desc;
  final Color dcolor;
  final String imgpath;
  final VoidCallback onPressed;
  final VoidCallback onTap;
  final IconData rightIcon;
  @override
  State<StatefulWidget> createState() => MyWaresListElementState();
}

class MyWaresListElementState extends State<MyWaresListElement> {
  @override
  Widget build(BuildContext context) {
    return OneListLine(
        widget.color,
        widget.code,
        widget.title,
        widget.TfontWeight,
        widget.Tsize,
        widget.desc,
        widget.dcolor,
        widget.imgpath,
        widget.id,
        widget.onPressed,
        widget.onTap
    );
  }
}

// 标题
Widget Title(Color tcolor,String title,FontWeight fontWeight,double Size){
  return Container(
    padding: const EdgeInsets.only(bottom: 8.0),
    child: new Text(
      title,
      style: new TextStyle(
        color:tcolor,
        fontSize: Size-4,
        fontWeight: fontWeight,
      ),
    ),
  );
}
// 编码（因为这里是在构建商品列表单元，用不上可以自行删除，或者设置为null）
Widget Code(Color tcolor,String code,FontWeight fontWeight,double Size){
  return Container(
    padding: const EdgeInsets.only(bottom: 2.0),
    child: new Text(
      code,
      style: new TextStyle(
        color:tcolor,
        fontSize: Size,
        fontWeight: fontWeight,
      ),
    ),
  );
}

// 说明信息
Widget Desc(String desc,Color dcolor){
  return Text(
    desc,// 'The msg is the Desc !',
    style: new TextStyle(
      color: dcolor,// Colors.grey[500],
    ),
  );
}
// 组合信息部分（编码+标题+说明）
Widget DataHead(Color tcolor,String code,String title,FontWeight TfontWeight,double Tsize,String desc,Color dcolor){
 return Expanded(
   child: new Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
       Code(tcolor,code,TfontWeight,Tsize),
       Title(tcolor,title,TfontWeight,Tsize),
       Desc(desc,dcolor),
     ],
   ),
 );
}
// 单行左边图片
Widget ListHeadLeft(String imgpath){
  return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 15, 0),
      child: new Image.network(
	  imgpath==''?'https://www.eatqionline.top:8008/media/img/logo/maifeng_dgHndBi.png':imgpath,
      width: 50.0,
      height: 50.0,
      fit: BoxFit.cover,
      )
    );
}
// 单行右侧点击图标
Widget LineCheck(int id,Function onPressed){
    return Container(
      margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
      child: ButtonCheck(onPressed), // PopupTap(onPressed: (){onPressed();},id: id,)// ButtonCheck(onPressed)
    );
}
// 右侧点击按钮
Widget ButtonCheck(Function onPressed){
  return TextButton(
    // onPressed: () {MyToast.success2('$id');} ,
      onPressed: () {onPressed();},
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(Color.fromARGB(255, 53, 53, 53)),
        minimumSize: MaterialStateProperty.all(Size(10, 5)),
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        // backgroundColor: MaterialStateProperty.all(Colors.grey),
      ),
      child: new Row(
        children: [
          new Icon(widget.rightIcon,),
        ],
      )
  );
}

// 组合列表单行（图片+组合信息部分+按钮）
Widget OneListLine(Color tcolor,String code,String title,FontWeight TfontWeight,double Tsize,String desc,Color dcolor,String imgpath,int id,Function onPressed,Function onTap){
  return InkWell(
    onTap: () {onTap();},
      child:Container(
      padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
      child: new Container(
          padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
          decoration: BoxDecoration(
            border: new Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) ),
          ),
          child:new Row(
            children: [
              ListHeadLeft(imgpath),
              // DataHead('Title',FontWeight.bold,18,'The msg is the Desc !',Colors.black38),
              DataHead(tcolor,code,title,TfontWeight,Tsize,desc,dcolor),
              LineCheck(id,onPressed),
            ],
          )
      )
  ),);
}