Flutter一行放置3个Radio ListTile时标题溢出折行如何实现单行显示

你遇到的溢出问题是因为ListTile默认自带大量内置边距，三个等分宽度的容器无法容纳Radio组件+文本的宽度，你可以按下面的方案修改：

方案1：调整Text和ListTile的属性（改动最小） #

给所有Text组件增加强制单行配置，同时缩减ListTile的默认边距即可：

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(
              contentPadding: EdgeInsets.symmetric(horizontal: 2), // 缩减默认的左右边距
              title: const Text('Female',
                maxLines: 1, // 强制单行显示
                overflow: TextOverflow.ellipsis, // 文本溢出时截断加省略号
              ),
              leading: Radio(
                fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                value: Gender.female,
                groupValue: _gen,
                onChanged: (Gender? value) {
                  setState(() {
                    _gen = value;
                  });
                },
              ),
            ),
          ),
          Expanded(
            child: ListTile(
              contentPadding: EdgeInsets.symmetric(horizontal: 2),
              title: const Text('Male',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              leading: Radio(
                fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                value: Gender.male,
                groupValue: _gen,
                onChanged: (Gender? value) {
                  setState(() {
                    _gen = value;
                  });
                },
              ),
            ),),
          Expanded(
            child:ListTile(
              contentPadding: EdgeInsets.symmetric(horizontal: 2),
              title: const Text('Other',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              leading: Radio(
                fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
                value: Gender.other,
                groupValue: _gen,
                onChanged: (Gender? value) {
                  setState(() {
                    _gen = value;
                  });
                },
              ),
            ),
          ),
        ],
      )
    ],
  ),
)

方案2：自定义单选布局（更灵活） #

ListTile本身是为单列列表项设计的，天生不适合放在一行做多选项布局，你可以直接自定义Row来实现，布局可控度更高：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    // 单个单选项，你可以单独抽成公共组件简化代码
    GestureDetector(
      onTap: () => setState(() => _gen = Gender.female),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
            value: Gender.female,
            groupValue: _gen,
            onChanged: (v) => setState(() => _gen = v),
          ),
          const Text('Female'),
        ],
      ),
    ),
    GestureDetector(
      onTap: () => setState(() => _gen = Gender.male),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
            value: Gender.male,
            groupValue: _gen,
            onChanged: (v) => setState(() => _gen = v),
          ),
          const Text('Male'),
        ],
      ),
    ),
    GestureDetector(
      onTap: () => setState(() => _gen = Gender.other),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Radio(
            fillColor: MaterialStateColor.resolveWith((states) => Color(0XFFB63728)),
            value: Gender.other,
            groupValue: _gen,
            onChanged: (v) => setState(() => _gen = v),
          ),
          const Text('Other'),
        ],
      ),
    ),
  ],
)

内容的提问来源于stack exchange，提问作者Manasvi Dobariya