时间戳

首页 > 解决方案 > 将 ListTiles 放在一行中

flutter - 将 ListTiles 放在一行中

问题描述

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

在 performLayout() 期间引发了以下断言： BoxConstraints 强制使用无限宽度。有问题的约束是： BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

但是我真的不明白盒子里到底有什么应该是带有 ListTiles 的卡片吗？有人可以帮我弄这个吗？

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

标签： flutterdartflutter-layoutflutter-web

解决方案

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

推荐阅读