如何在 Flutter 中使用 Getx 制作带有圆角框的复选框 ListTile

Question

我对 Flutter 开发比较陌生，我想实现复选框，如使用 GetX flutter 附加的屏幕截图所示。 我也希望我的复选框的边框是圆形的。

截屏

Answer 1

您可以使用shape字段和CircleBorder class 或RoundedRectangleBorder来制作一个 CheckBox 圆形（如果您希望它们具有圆角）：

Checkbox(
      checkColor: Colors.white,
      value: isChecked,
      shape: CircleBorder(),
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );

结果：

或者：

Checkbox(
      checkColor: Colors.white,
      value: isChecked,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(5.0))),
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );

结果：

要使用 GetX，我认为您应该提供一些代码或示例来解释您的意思以及您想要准确实现的目标，否则最好的建议可能是阅读文档并检查一些示例。

Answer 2

正如您在屏幕截图中提到的那样。 您可以使用 GetX 实现它，如下所示：

创建一个变量以跟踪检查的值

final Rxn<int> selected = Rxn<int>();

现在您必须使用Obx小部件实现 UI 以侦听观察变量 ' selected ' 的变化

 Obx( () => Column( children: [ CheckboxListTile( title: const Text('This is the title 1'), subtitle: const Text('This is the subtitle with ID 1'), checkColor: Colors.white, activeColor: Colors.blueGrey, controlAffinity: ListTileControlAffinity.leading, checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), value: selected.value == 1, onChanged: (val) { val?? true? selected.value = 1: selected.value = null; }, ), CheckboxListTile( title: const Text('This is the title 2'), subtitle: const Text('This is the subtitle with ID 2'), checkColor: Colors.white, activeColor: Colors.blueGrey, controlAffinity: ListTileControlAffinity.leading, checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)), value: selected.value == 2, onChanged: (val) { val?? true? selected.value = 2: selected.value = null; }, ), ], ), ))

以下将是 output：