如何在 Flutter 2.2.1 的 CheckboxListTile 中应用单选?

时间:2021-07-13 09:21:51

标签: flutter dart widget flutter-layout flutter2.0

此设计包括从发票数据列表中进行的一个选择。例如,用户选择了要提交的“公司数据”选项。代码包含用于选择选项的 CheckboxListTile。它只需要在四个选项中选择一个。我是扑的新手。

Screenshot of design:

这是我使用的代码:

//Declare Model
    List<CheckBoxListTileModel> checkBoxListTileModel =
          CheckBoxListTileModel.getUsers();

//UI Setup
    Container(
          height: 240.0,
          child: Padding(
            padding: EdgeInsets.fromLTRB(18.0, 15.0, 18.0, 2.0),
            child: StatefulBuilder(
              builder: (context, _setState) => new ListView.builder(
                  itemCount: checkBoxListTileModel.length,
                  itemBuilder: (BuildContext context, int index) {
                    return new CheckboxListTile(
                        activeColor: HexColor('#34c47e'),
                        dense: true,
                        //font change
                        title: new Text(
                          checkBoxListTileModel[index].title,
                          style: TextStyle(
                            fontSize: 14,
                          ),
                        ),
                        value: checkBoxListTileModel[index].isCheck,
                          onChanged: (newValue) {
                        _setState(() => {
                              checkBoxListTileModel[index].isCheck = newValue!
                            });
                      });
                  }),
            ),
          ),
        );

//Model Class
class CheckBoxListTileModel {
  int userId;
  String title;
  bool isCheck;

  CheckBoxListTileModel(
      {required this.userId, required this.title, required this.isCheck});

  static List<CheckBoxListTileModel> getUsers() {
    return <CheckBoxListTileModel>[
      CheckBoxListTileModel(userId: 1, title: "Personal Data", isCheck: true),
      CheckBoxListTileModel(userId: 2, title: "Company Data", isCheck: false),
      CheckBoxListTileModel(
          userId: 3, title: "Without VAT/Final Consumer", isCheck: false),
      CheckBoxListTileModel(userId: 4, title: "Other", isCheck: false),
    ];
  }
}

上面的代码选择了多个复选框。我只需要检查一个。

0 个答案:

没有答案