【问题标题】:Flutter ListTile with Radio Button 3 in one rowFlutter ListTile 与单选按钮 3 在一行
【发布时间】:2021-09-21 11:33:51
【问题描述】:

我正在尝试使用单选按钮广告 ListTile 添加 3 个带有标题的单选按钮,但每个单选按钮的标题都溢出并出现在两行中。如何让它出现在一行中?

这是图片

这是我用于显示 3 个图块的代码。

             Padding(
                        padding: EdgeInsets.only(left: 5, right: 5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Gender",
                              style: TextStyle(fontSize: 19),),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Expanded(
                                  child:ListTile(
                                    title: const Text('Female'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.female,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: ListTile(

                                    title: const Text('Male'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.male,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),),
                                Expanded(
                                  child:ListTile(
                                    title: const Text('Other'),
                                    leading: Radio(
                                      fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                                      value: Gender.other,
                                      groupValue: _gen,
                                      onChanged: (Gender? value) {
                                        setState(() {
                                          _gen = value;
                                        });
                                      },
                                    ),
                                  ),
                                ),

                              ],
                            )

【问题讨论】:

    标签: android flutter flutter-layout


    【解决方案1】:

    在 ListTile 中添加 contentPadding 属性:

    ListTile(
           contentPadding: EdgeInsets.all(0),
    

    contentPadding set 0 删除前导和标题之间的多余空格。

    欲了解更多信息:https://api.flutter.dev/flutter/material/ListTile/contentPadding.html

    【讨论】:

    • 谢谢。成功了
    • 欢迎。快乐编码。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-07
    • 1970-01-01
    • 2013-08-02
    • 2021-12-18
    • 1970-01-01
    • 2019-04-11
    相关资源
    最近更新 更多