将 ListTiles 排成一行

Question

我现在正在研究更多小时，但不明白为什么不能将图像和带有一堆 ListTiles 的卡片放在一行中。我得到的错误是：

在 performLayout() 期间抛出了以下断言： BoxConstraints 强制无限宽度。违规的限制是： BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

但我真的不明白 Box 中到底应该装什么，应该是带有 ListTiles 的 Card 吗？有人可以帮我解决这个问题吗？

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child:
            /* card == null
            ? loadCards()
            : ListTile() */
            SingleChildScrollView(
          child: Card(
            child: Row(mainAxisSize: MainAxisSize.min, children: [
              Image.network(
                "widget.card.imageUrl",
                loadingBuilder: (BuildContext context, Widget child,
                    ImageChunkEvent loadingProgress) {
                  if (loadingProgress == null) {
                    return child;
                  }
                  return Center(
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.red,
                    ),
                  );
                },
              ),
              Card(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
                  ListTile(
                    trailing: Icon(Icons.play_arrow),
                    title: Text("Black Lotus"),
                    subtitle: Text("Name"),
                  ),
                  Container(
                    child: Row(
                      children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
                    ),
                  ),
                  ListTile(
                    title: Text("Hello"),
                  ),
                  ListTile(
                    title: Text("Hello"),
                  ),
                ]),
              ),
            ]),
          ),
        ),
      ),
    );
  }

Answer 1

您的 ListTile 需要约束，以便知道其边界在哪里。

只需给它一些约束（例如，用 width 包装在 SizedBox 中），或者，如果您想尽可能多地使用它 space，只需包装每个 ListTile 带有 Flex 小部件，例如 Flexible 或 Expanded 如果您想与 Column 上的所有图块均匀共享 space。

Answer 2

Wrap Card with Expanded/Flexible 这将解决您的约束问题，此外，提供图像宽度也非常重要，因为在剩余的 space 中您将放置其他小部件。

return Scaffold(
        appBar: AppBar(
          title: Text('Sample'),
        ),
        body: SingleChildScrollView(
          child: Card(
            child: Row(mainAxisSize: MainAxisSize.min, children: [
              Image.network(
                "https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg",
                width: 40,
                loadingBuilder: (BuildContext context, Widget child,
                    ImageChunkEvent loadingProgress) {
                  if (loadingProgress == null) {
                    return child;
                  }
                  return Center(
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.red,
                    ),
                  );
                },
              ),
              Expanded(
                child: Card(
                  child: Column(mainAxisSize: MainAxisSize.min, children: [
                    ListTile(
                      trailing: Icon(Icons.play_arrow),
                      title: Text("Black Lotus"),
                      subtitle: Text("Name"),
                    ),
                    Container(
                      child: Row(
                        children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
                      ),
                    ),
                    ListTile(
                      title: Text("Hello"),
                    ),
                    ListTile(
                      title: Text("Hello"),
                    ),
                  ]),
                ),
              ),
            ]),
          ),
        ),
      );

将 ListTiles 排成一行

Placing ListTiles in a Row

dart

flutter

flutter-layout

flutter-web