颤动会减少复选框与其标题之间的空间

Question

我以这种方式使用CheckboxListTile：

ListTileTheme(
  contentPadding: EdgeInsets.only(right: 20.0),
  child: CheckboxListTile(
    controlAffinity: ListTileControlAffinity.leading,
    value: false,
    onChanged: (value) {},
    title: Text(
      "افزودن به فهرست پرکاربردها"
    ),
  ),
),

结果：

如何减小复选框和标题之间的空间？

Answer 1

在CheckBoxListTile中，可能难以实现所需的目标。但是，总有一种解决方法，它正在使用Row()。另外，我们将使用FlatButton()来获得相同的效果。

这里的问题是，在FlatButton()中，您只需要执行与onChanged中的Checkbox()相同的操作

解决方案

     bool _myBool = false;

     Container(
        child: FlatButton(
          // here toggle the bool value so that when you click 
          // on the whole item, it will reflect changes in Checkbox
          onPressed: () => setState(() => _myBool = !_myBool),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 24.0,
                width: 24.0,
                child: Checkbox(
                  value: _myBool,
                  onChanged: (value){
                     setState(() => _myBool = value);
                  }
                )
              ),
              // You can play with the width to adjust your
              // desired spacing
              SizedBox(width: 10.0),
              Text("افزودن به فهرست پرکاربردها")
            ]
          )
        )
      )

结果

如果您希望Checkbox()在右边，则只需切换Text()和Checkbox()的位置。休息会保持不变。

Answer 2

尝试以此替换ListTileTheme：

Padding(
  padding: EdgeInsets.only(right: 20.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text(
        "افزودن به فهرست پرکاربردها"
      ),
      SizedBox(
        width: /* The spacing in between the checkbox and text */ 20,
      ),
      Checkbox(
        value: false,
        onChanged: (value) {},
      ),
    ],
  ),
),