dart 如何在ListView中将内容按行宽换行？

bcs8qyzn 于 2022-12-16 发布在其他

关注(0)|答案(4)|浏览(191)

我想画一个垂直列表。列表中的每一项都应该只填充 Package 大小。
但我的代码绘制的列表项与全宽如下：

我尝试使用MainAxisSize.min，但它不工作。

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final List<String> list = ["apple", "banana", "cat", "dragon"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.black)),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('[$index]'),
                  const SizedBox(width: 4),
                  Text(list[index])
                ],
              ),
            );
          }),
    );
  }
}

dart

来源：https://stackoverflow.com/questions/74718177/flutter-how-to-wrap-contents-the-row-width-in-the-listview

4条答案

按热度按时间

ccrfmcuu1#

因为使用了ListView，所以子进程将填充宽度。
如果不想显示太多数据，可以考虑使用SingleChildScrollView我在这里写了一篇文章来比较它们，并解释了何时使用它
https://medium.com/easyread/my-october-flutter-notes-2-6e0c78cf2e56

赞(0）回复(0）举报 2022-12-16

bz4sfanl2#

添加Allign并向左对齐：

Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Align(
              alignment: Alignment.centerLeft,
              child: Container(
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.black)),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('[$index]'),
                    const SizedBox(width: 4),
                    Text(list[index])
                  ],
                ),
              ),
            );
          }),
    );
  }

赞(0）回复(0）举报 2022-12-16

ecbunoof3#

默认情况下，ListView采用所有可用的宽度，即使你用Align Package 你的container，这只是改变了item's width的宽度，而不是ListView的宽度（如果你用彩色容器 Package 你的列表视图，你会看到）。
如果您不使用长列表，您可以使用SingleChildScrollView和Column如下：

body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: list.mapIndexed((index, e) {
            return Container(
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.black)),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('[$index]'),
                  const SizedBox(width: 4),
                  Text(e)
                ],
              ),
            );
          }).toList(),
        ),
      )

字符串