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

e0bqpujr  于 2023-04-22  发布在  Flutter
关注(0)|答案(4)|浏览(184)

我是这样使用CheckboxListTile的:

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

结果是

我怎样才能减少空间之间的复选框和它的标题?

v440hwme

v440hwme1#

使用转换.翻译

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(() {});
                        },
                      ),
                    ),

fafcakar

fafcakar2#

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()的位置交换一下,其余的都一样。

s3fp2yjn

s3fp2yjn3#

尝试将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) {},
      ),
    ],
  ),
),
8xiog9wr

8xiog9wr4#

这帮助我在ListTileTheme horizontalTitleGap中添加了以下内容:0,

相关问题