如何在N个字符后自动换行？

Question

我用这样的ListView.builder显示项目

如您所见，如果使用了很长的名称，例如“ Speedy Motor Services 1234567890”，则其旁边的文本将受到严重挤压。

代码：

return ListView.builder(
  itemBuilder: (context, position) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
                  child: FittedBox(
                    fit:BoxFit.fitWidth,
                    child: Text(_displayedList[position].name,
                      style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), 
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                  child: Text(_displayedList[position].location,
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
                  child: Text(_displayedList[position].distance.toString()+" KM",                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
              ],
            ),
            Expanded(
              child:Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  //Expanded(),
                  Text(_displayedList[position].services.toString(),
                    style: TextStyle(color: Colors.grey), softWrap: true,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
                    ),
                  ),
                ],
              ),
            )
          ),
        ],
      ),
      Divider(
        height: 2.0,
        color: Colors.grey,
      )
    ],
  );
},
itemCount: _displayedList.length);
},))]),)

我尝试使用FittedBox，但效果不如我预期。 有什么办法说每15个字符换一个文本？

我想要的是这样的

Answer 1

您只需要用expanded包装内容并使用flex

这是column内的代码片段

Expanded(
            flex : 2,
            child :Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 6.0),
              child: FittedBox(
                fit:BoxFit.fitWidth,
                child: Text(_displayedList[position].name,
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold)), 
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
              child: Text(_displayedList[position].location,
                style: TextStyle(fontSize: 16.0),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(12.0, 6.0, 12.0, 12.0),
              child: Text(_displayedList[position].distance.toString()+" KM",                    style: TextStyle(fontSize: 16.0),
              ),
            ),
          ],
                 ),
           ),Expanded(
               flex :1,
              child:Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  //Expanded(),
                  Text(_displayedList[position].services.toString(),
                    style: TextStyle(color: Colors.grey), softWrap: true,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.phone, size: 20, color: Colors.green[700],),
                    ),
                  ),
                ],
              ),
            )
          ),
        ],
      ),

现在，您只需调整flex即可满足界面要求。