尝试构建水平可滚动的ListView

Question

我想构建一个水平可滚动的 ListView，其中有 2 个容器彼此叠置。这个想法是建立这样的东西：

我的想法是成为一个带有 ListView 构建器子项的 SizedBox。但是，我找不到如何将这两个容器堆叠在一起。我应该使用 Stack 小部件还是其他东西？非常感谢这里的指导。

这就是我目前所处的位置：

SizedBox(
  height: deviceWidth * 0.55,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => Card(
        child: Stack(
      alignment: AlignmentDirectional.center,
      children: [
        Container(color: whitePrimary),
        Container(
          color: Colors.purple,
        )
      ],
    )),
  ),
),

我的目标是在彼此之上显示 2 个容器，只是为了测试 Stack Widget，但没有成功..

在上面的代码中，deviceHeight 属性是：

Size size = MediaQuery.of(context).size;

double deviceHeight = size.height;

Answer 1

试试这个

SizedBox(
          height: 100,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 4,
            itemBuilder: (context, index) {
              return Stack(children: [
                Container(
                  height: 150,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  height: 100,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            offset: Offset(0, 5),
                            blurRadius: 10)
                      ]),
                )
              ]);
            },
          ),
        )

Answer 2

您可以用

Container

 包裹 

Align，使其与

Stack

对齐。您还需要提供

Container

实际的子小部件，以便它开始出现在屏幕上。

Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      color: Colors.white,
      child: Text('This is a sentence'),
    ),
    Align( // Align the second Container to the top center of the Stack
      alignment: Alignment.topCenter,
      child: Container(
        color: Colors.purple,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30),
          child: Text('This is on the top container'),
        ),
      ),
    )
  ],
)

另一种选择是使用

Positioned

小部件。