颤振减少复选框和它的标题之间的空间

Question

我是这样使用 CheckboxListTile 的：

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

结果：

如何减少复选框与其标题之间的间距？

Answer 1

使用 Transform.translate

Transform.translate(
                          offset: const Offset(-20, 0),
                         child: childWidget(),
)

完整示例

Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: CheckboxListTile(
                        value: isChecked,
                        controlAffinity: ListTileControlAffinity.leading,
                        contentPadding: EdgeInsets.zero,
                        title: Transform.translate(
                          offset: const Offset(-20, 0),
                          child: RichText(
                            text: TextSpan(
                              text: S.of(context).iAgreeWith,
                              style: TextStyle(
                                  color: Theme.of(context).hintColor,
                                  fontWeight: FontWeight.w400),
                              children: <TextSpan>[
                                TextSpan(
                                  text: S.of(context).terms,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S.of(context).termsCap,
                                            ),
                                          ));
                                    },
                                ),
                                TextSpan(
                                    text: " " + S.of(context).and + " ",
                                    style: TextStyle(
                                        color: Theme.of(context).hintColor,
                                        fontWeight: FontWeight.w400)),
                                TextSpan(
                                  text: S.of(context).privacyPolicy,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      //fontSize: 14.0.sp,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S
                                                  .of(context)
                                                  .privacyPolicyCaps,
                                            ),
                                          ));
                                    },
                                ),
                              ],
                            ),
                          ),
                        ),
                        activeColor: Theme.of(context).hintColor,
                        checkColor: Theme.of(context).cursorColor,
                        onChanged: (value) {
                          isChecked = !isChecked;
                          setState(() {});
                        },
                      ),
                    ),

Answer 2

在CheckBoxListTile 中，可能很难实现你想要的。但是，总有一种解决方法，那就是使用Row()。另外，我们将使用FlatButton() 来获得相同的效果。

这里的问题是，在FlatButton() 中，您只需与Checkbox() 中的onChanged 做同样的事情

解决方案

     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 3

尝试用这个替换 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) {},
      ),
    ],
  ),
),