flutter - 将 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

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

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"),
                    ),
                  ]),
                ),
              ),
            ]),
          ),
        ),
      );