[Day15] Flutter with GetX Wrap & Chip

Wrap & Chip

原生的Widget, 对於之前接触iOS的人来说一开始看到有惊讶一下(居然有原生的!),
有一点像是hash tag, 个人把Wrap理解成另一种形式的ListView.
而Chip的部分则是ListView的item, 而flutter原生已经处理好.
以下范例将用GetX的Obx作结合

Widget部分

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text('ToastPage')),
  body: SafeArea(
    child: SizedBox.expand(
      child: Stack(
        children: [
          Obx(
            () {
              return Wrap(
                spacing: 5,
                runSpacing: 0,
                children:
                    List.generate(controller.chipList.length, (index) {
                  final title = controller.chipList[index];
                  return Chip(
                    label: Text(title),
                    onDeleted: () => controller.removeChipData(index),
                  );
                }),
              );
            },
          ),
          Positioned.fill(
            bottom: 8,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: SizedBox(
                height: Get.width * 0.8 * 0.14,
                child: FloatingActionButton(
                  onPressed: () {
                    controller.addChipData();
                  },
                  child: Text("+", style: TextStyle(fontSize: 20)),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);
}

GetxController部分
(+ 按钮)点击事件addChipData用random 产生数字後加入List,
删除的部分Chip的onDeleted事件呼叫controller的removeChipData().

class WrapPageController extends GetxController {
  final _chipList = <String>[].obs;
  get chipList => _chipList.toList();

  @override
  void onInit() {
    super.onInit();
  }

  addChipData() {
    Random random = Random();
    int randomNumber = random.nextInt(200);
    _chipList.add("$randomNumber");
  }

  removeChipData(int index) {
    _chipList.removeAt(index);
  }
}

效果如下