Chip组件详解

初始化数据：

late List dataSources = ['客厅','主卧','次卧','餐厅','厨房','书房','玄关','阳台','儿童房','衣帽间'].obs;

定义 TextField的 controller

final TextEditingController otherHomeNameTF = TextEditingController();

Chip组件UI

List<Widget> _getAttrItemWidget(attrItem) {
    List<Widget> attrItemList = [];
    attrItem.forEach((item) {
      attrItemList.add(Container(
        margin: const EdgeInsets.all(10),
        child: GestureDetector(
          onTap: (){
            print(item);
          },
          child: Chip(
            label: Text(item),
            // padding: const EdgeInsets.all(10),
            backgroundColor: Colors.black12,
          ),
        ),
      ));
    });
    return attrItemList;
  }

Body 主体 UI 代码：

return Scaffold(
      appBar: AppBar(
        title: const Text('添加房间'),
        actions: [
          GestureDetector(
            onTap: () {
              print(logic.otherHomeNameTF.text);
            },
            child: Container(
              margin: const EdgeInsets.fromLTRB(0, 15, 10, 0),
              child: const Text(
                '保存',
                style: TextStyle(fontSize: 17),
              ),
            ),
          )
        ],
      ),
      body: Column(
        children: [
          Container(
            color: Colors.white,
            height: 50,
            margin: const EdgeInsets.all(10),
            child: Row(
              children: [
                const Text('房间名称'),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  flex: 1,
                  child: TextField(
                    controller: logic.otherHomeNameTF,
                    decoration:
                        const InputDecoration.collapsed(hintText: "请输入:"),
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.all(10),
            child: const Align(
              alignment: Alignment.centerLeft,
              child: Text('推荐'),
            ),
          ),
          Container(
              // color: Colors.white,
              margin: const EdgeInsets.all(10),
              child: Obx(
                () => Wrap(
                  children: _getAttrItemWidget(state.dataSources),
                ),
              ))
        ],
      ));
}