如何使用ListView.builder实现CheckboxListTile文本单行显示

问题定位 #

• Text组件未配置单行限制，默认超出宽度自动折行
• CheckboxListTile的secondary参数配置错误：设置了EdgeInsets.only(left: 100)的左侧内边距，同时给外层Container设置了width: MediaQuery.of(context).size.height *0.2的超大宽度，严重挤压了标题区域的可用空间，是文本折行的核心原因
• 存在冗余嵌套：ListView.builder外层套了未启用任何功能的ListTile，额外压缩了内部控件的可用宽度

修复代码 #

你只需要修改CheckboxListTile中title和secondary两处的代码，同时清理冗余嵌套即可：

// 清理外层冗余的ListTile，直接把ListView放在SizedBox中
customExpansionTile(
    context,
    "Visting Time",
    true,
    Icon(Icons.timer_rounded, color: HexColor("#5344ed")), //leading
    <Widget>[
        Container(
            child: Row(
                children: [
                    Expanded(
                        child: SizedBox(
                            height: MediaQuery.of(context).size.height * 0.45,
                            // 删掉原本的ListTile，直接放ListView.builder
                            child: ListView.builder(
                                itemCount: checkBoxListTileModelForVisting.length,
                                itemBuilder: (BuildContext context, int index) {
                                    return Container(
                                        padding: EdgeInsets.all(0.0),
                                        child: CheckboxListTile(
                                            controlAffinity: ListTileControlAffinity.leading,
                                            activeColor: HexColor("#5344ed"),
                                            dense: true,
                                            title: Text(
                                                checkBoxListTileModelForVisting[index].title,
                                                style: GoogleFonts.montserrat(
                                                  fontSize: 12,
                                                ),
                                                // 新增3个属性控制单行显示
                                                maxLines: 1,
                                                softWrap: false,
                                                overflow: TextOverflow.ellipsis, // 超出显示省略号，不需要可以替换为TextOverflow.clip
                                            ),
                                            value: checkBoxListTileModelForVisting[index].isCheck,
                                            // 修正secondary的错误配置
                                            secondary: checkBoxListTileModelForVisting[index].isCheck == true
                                                ? IconButton(
                                                    tooltip:"Pick Time",
                                                    onPressed: () {
                                                      _VisitingTimeDialogue(
                                                          checkBoxListTileModelForVisting[index].title
                                                      );
                                                    },
                                                    icon: Icon(Icons.add)
                                                )
                                                : SizedBox.shrink(), // 未选中时用空白占位
                                            onChanged: (bool? val) {
                                                itemChangeforVisiting(val!, index);
                                            }
                                        ),
                                    );
                                },
                            ),
                        ),
                    )
                ],
            ),
        )
    ]
)

补充说明 #

如果你不需要文字超出时显示省略号，将overflow属性改为TextOverflow.clip即可直接截断超出部分。修改完成后标题区域会获得足够的显示宽度，Wednesday这类短文本可以完整单行显示。

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