Question

我想实现多个包含卡片的水平列表，其中包含一些详细信息，现在我得到的只是白屏（无错误）

这是我的代码：

Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 50,
              itemBuilder: (BuildContext context, int index) {
                Card(
                  child: Column(
                    children: <Widget>[
                      Text('fsfssffs'),
                    ],
                  ),
                );
              },
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 50,
              itemBuilder: (BuildContext context, int index) {
                Card(
                  child: Column(
                    children: <Widget>[
                      Text('fsfssffs'),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
);

我想实现类似Facebook的故事

Answer 1

在列表itemBuilder上使用=>返回项目：

Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) =>
            Card(
              child: Column(
                children: <Widget>[
                  Text('fsfssffs'),
                ],
              ),
            );
          },
        ),
      ),
      SizedBox(
        height: 20.0,
      ),
      Expanded(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) =>
            Card(
              child: Column(
                children: <Widget>[
                  Text('fsfssffs'),
                ],
              ),
            );
          },
        ),
      ),
    ],
  ),
);

Answer 2

您没有从itemBuilder方法返回任何小部件，这就是为什么您无法在屏幕上看到任何内容的原因。

基本上，有两种解决方案，我给您一个使用build()方法的想法，您可以在itemBuilder中进行操作。

（1）使用=>（胖箭头表示法）

示例：

Widget build(context) => Text("Hi");

（2）使用return。

Widget build(context) {
  return Text("Hi");
}

如何在列内实现多个水平列表

2 个答案: