【flutter】封裝自定義單選框

flutter裏有自帶的radioListTile,但是需求對ui對要求不一樣,導致只能直接封裝一個。
在這裏插入圖片描述
大概是這樣的效果,爲了避免不必要的麻煩,我把文字隱藏了。

我的json是以下格式的

List list =[
    {
      "content": "content1111",
      "reasonId":0,
    },
    {
        "content": "content2222",
      "reasonId":1,
    },
    {
        "content": "content3333",
      "reasonId":2,
    },
  ];

定義了全局變量 int itemChecked; 裏面是當前選擇的itemChecked。

(list ?? []).forEach((item) {
          this.itemChecked = (item?.checked ?? false) ? item.reasonId : this.itemChecked;
          ListWidgetItem(
            content: item.content ?? "",
            value: item.reasonId ?? false,
            itemChecked: this.itemChecked,
            onChanged: (value) {
              if (this.itemChecked != item.reasonId) {
                setState(() {
                  this.itemChecked = item.reasonId;
                });
              }
            },
          ));
        };
class ListWidgetItem extends StatefulWidget {
  int value;
  String content = "";
  int itemChecked;

  Function(int) onChanged;

  ListWidgetItem({Key key, @required this.value, @required this.content,@required this.itemChecked,@required this.onChanged}) : super(key: key);

  @override
  _ListWidgetItemState createState() => _ListWidgetItemState();
}

class _ListWidgetItemState extends State<ListWidgetItem> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          widget.onChanged(widget.itemChecked);
        },
        child: Container(
          height: 44,
          child: Row(
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                child: Container(
                  width: 3,
                  height: 3,
                  decoration: new BoxDecoration(
                    color: Color.gray,
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 5, right: 45),
                  child: Text(
                    widget.content,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 14, color: HitchColor.gray_666666),
                  ),
                ),
              ),
              widget.value == widget.itemChecked
                  ? Image.asset("(點擊後的圖片)", width: 15, height: 15)
                  : Image.asset("(未點擊的圖片)",width: 15, height: 15)
            ],
          ),
        ));
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章