如何在 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：