Flutter：如何根据文本长度设置Container宽度？解决占满宽度问题

问题描述 #

我正在创建一个基于ListView.builder的简单列表，列表项是包含Text组件的Container，期望根据文本长度设置Container的宽度，但当前Container始终占据最大宽度，想要实现类似WhatsApp聊天文本的效果，相关代码如下：

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(body: SafeArea(
      child: Column(children: [
        Expanded(
          child: ListView.builder(
              itemCount: expenselist.length,
              itemBuilder: (context,index){
                return Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: Container(
                    padding: EdgeInsets.all(20),
                    color: Colors.blue,
                    child: Text(expenselist[index]['Amount'].toString()),
                  ),
                );
              }),
        ),
        Container(
          color: Colors.blue[100],
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Enter Amount'
            ),
          ),
        ),
      ],),
    ),),
  );
}

问题原因 #

Flutter中，当Container未指定宽度且父组件为ListView这类可滚动的扩展型组件时，默认会拉伸填充父组件的可用横向空间。ListView的itemBuilder返回的组件会被强制撑满列表宽度，导致Container无法根据内部Text的长度自适应宽度。

解决方法 #

1. 用Align组件包裹Container（推荐） #

通过Align指定对齐方式，让Container仅占据内部Text所需的宽度，同时可自由控制对齐方向（左/右对齐，模拟聊天消息效果）：

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(body: SafeArea(
      child: Column(children: [
        Expanded(
          child: ListView.builder(
              itemCount: expenselist.length,
              itemBuilder: (context,index){
                return Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  // 用Align包裹Container，设置左对齐
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(20),
                      color: Colors.blue,
                      child: Text(expenselist[index]['Amount'].toString()),
                    ),
                  ),
                );
              }),
        ),
        Container(
          color: Colors.blue[100],
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Enter Amount'
            ),
          ),
        ),
      ],),
    ),),
  );
}

2. 限制最大宽度（优化体验） #

如果需要避免过长文本撑满屏幕，可给Container添加constraints限制最大宽度，结合Text的溢出处理：

child: Align(
  alignment: Alignment.centerLeft,
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    // 限制最大宽度为屏幕宽度的75%
    constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
    child: Text(
      expenselist[index]['Amount'].toString(),
      // 文本过长时自动换行+显示省略号
      overflow: TextOverflow.ellipsis,
      softWrap: true,
    ),
  ),
),

3. 替代方案：使用IntrinsicWidth #

IntrinsicWidth会让Container根据子组件的宽度自适应，但该组件会增加布局计算开销，不推荐在大量列表项中使用：

child: IntrinsicWidth(
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text(expenselist[index]['Amount'].toString()),
  ),
),

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