如何使用 ListView 构建器在一行中显示 CheckboxListTile 文本？

Posted 2023-02-23

【中文标题】如何使用 ListView 构建器在一行中显示 CheckboxListTile 文本？

【英文标题】：How do I display a CheckboxListTile text in a single line, using ListView builder?

【发布时间】：2021-12-01 17:19:14

【问题描述】：

我试图在一行中显示复选框的文本，但它拆分为第二行。代码如下：

我创建了一个自定义的 ExpansionListTile：

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,
                            child: ListTile(  
                                //font change
                                subtitle: ListView.builder(
                                    itemCount: checkBoxListTileModelForVisting.length,
                                    itemBuilder: (BuildContext context, int index) 
                                        return new Container(
                                            padding: new EdgeInsets.all(0.0),
                                            child: Column(
                                                children: <Widget>[
                                                    new CheckboxListTile(
                                                        controlAffinity:
                                                        ListTileControlAffinity.leading,
                                                        activeColor: HexColor("#5344ed"),
                                                        dense: true,
                                                        //font change
                                                        title: new Text(
                                                            checkBoxListTileModelForVisting[index].title,
                                                            style: GoogleFonts.montserrat(
                                                            fontSize: 12,
                                                        ),
                                                    ),
                                                    value: checkBoxListTileModelForVisting[index]
                                                    .isCheck,
                                                    secondary: Container(
                                                        padding:EdgeInsets.only(left: 100),
                                                        height: MediaQuery.of(context).size.width *0.9,
                                                        width: MediaQuery.of(context).size.height *0.2,
                                                        child:
                                                        checkBoxListTileModelForVisting[index].isCheck ==true?
                                                        IconButton(
                                                            tooltip:"Pick Time",
                                                            onPressed: () 
                                                                _VisitingTimeDialogue(
                                                                    checkBoxListTileModelForVisting[index]
                                                                .title);
                                                            ,
                                                            icon: Icon(Icons.add)
                                                        )
                                                    : null),
                                                    onChanged: (bool? val) 
                                                        itemChangeforVisiting(val!, index);
                                                    ),

星期三显示不正确，请告诉我哪里做错了。

【参考方案1】：

将width 替换为height

height: MediaQuery.of(context).size.width *0.9, 
                                        
width: MediaQuery.of(context).size.height *0.2,

喜欢

height: MediaQuery.of(context).size.height *0.9, 
                                        
width: MediaQuery.of(context).size.width *0.2,

我认为你的secondary 占用了额外的空间，使用扩展而不是宽度是有意义的

并添加到Text overflow: TextOverflow.ellipsis 和 maxLines: 1

喜欢

Text('your text', overflow: TextOverflow.ellipsis, maxLines: 1)

如果它不能帮助您尝试使用 autoSizeText 包

【参考方案2】：

checkboxlisttile 包裹到容器并给出最大宽度