如何根据子文本的长度设置容器的宽度？扑

Question

我正在尝试开发一个聊天应用程序，我正在尝试在容器内显示文本消息并根据消息的长度设置宽度。如何根据字符串的长度设置宽度？ P.S 消息使用 listview.builder 显示，每个容器都有背景颜色。

ListView.builder(
        padding: EdgeInsets.only(top: 8.0, left: 15.0, right: 15.0),
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.all(20.0),
            margin: index % 2 == 0
                ? EdgeInsets.only(bottom: 5.0, right: 60.0)
                : EdgeInsets.only(bottom: 5.0, left: 60.0),
            decoration: index % 2 == 0
                ? BoxDecoration(
                    border: Border.all(
                      color: Colors.grey,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(30.0),
                    ),
                  )
                : BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.all(
                      Radius.circular(30.0),
                    ),
                  ),
            child: Text(
              messages[index].text,
              style: TextStyle(color: Colors.black),
            ),
          );
        },
      ),

我想要的：

我得到了什么：

Answer 1

好的，那是因为 ListView 的 children 总是被拉伸，我对你的代码做了一些更改，首先使用 Align 小部件根据索引向左或向右对齐，并用 UnconstrainedBox 包裹你的 Container 以避免填充宽度。

  ListView.builder(
        padding: EdgeInsets.only(top: 8.0, left: 15.0, right: 15.0),
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Align(
            alignment:
                index % 2 == 0 ? Alignment.centerLeft : Alignment.centerRight,
            child: UnconstrainedBox(
              child: Container(
                padding: EdgeInsets.all(20.0),
                decoration: index % 2 == 0
                    ? BoxDecoration(
                        border: Border.all(
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.all(
                          Radius.circular(30.0),
                        ),
                      )
                    : BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.all(
                          Radius.circular(30.0),
                        ),
                      ),
                child: Text(
                  messages[index].text,
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          );
        },
      );

Answer 2

  @override
  Widget build(BuildContext context) {
    final messages = [
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      'This is a short message.',
      'This is a relatively longer line of text.',
      'Hi!'
    ];
    return Scaffold(
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(20.0),
            child: Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: index % 2 == 0
                  ? MainAxisAlignment.start
                  : MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.all(20.0),
                  constraints: BoxConstraints(
                    maxWidth: MediaQuery.of(context).size.width * 0.7,
                  ),
                  decoration: index % 2 == 0
                      ? BoxDecoration(
                          border: Border.all(
                            color: Colors.grey,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(30.0),
                          ),
                        )
                      : BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.all(
                            Radius.circular(30.0),
                          ),
                        ),
                  child: Text(messages[index],
                      style: TextStyle(color: Colors.black)),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

如何根据子文本的长度设置容器的宽度？扑

How to set the width of a Container based on the length of its child Text? Flutter

flutter

flutter-layout

我想要的：

我得到了什么：