我想创建一个可滚动的堆栈列表项目，每个项目都落向屏幕

Question

我正在尝试创建这个可滚动的堆叠列表：下面是图像。 想要的结果。

当我增加物品数量时，列出的物品会变形，如果有人可以帮助我，我将不胜感激。 itemCount 增加时的结果

return Expanded(
      child: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
              child: Container(
                padding: P_ALL,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: Stack(children: [
                  ...List.generate(10, (index) {
                    return Positioned(
                      top: index * 70.0,
                      left: 0,
                      right: 0,
                      height: 100.0,
                      child: Transform(
                        alignment: Alignment.center,
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.0015)
                          ..rotateX(.6),
                        child: InkWell(
                          onTap: () => print(index),
                          child: Container(
                            alignment: Alignment.topCenter,
                            width: MediaQuery.of(context).size.width,
                            height: 100.0,
                            decoration: BoxDecoration(
                                color: appRedColor,
                                boxShadow: [BoxShadow(spreadRadius: .2, blurRadius: 1.0, color: Colors.white)],
                                borderRadius: BorderRadius.circular(9.0),
                                image: DecorationImage(
                                  image: NetworkImage(restaurantImages),
                                  fit: BoxFit.cover,
                                )),
                            child: Padding(
                              padding: const EdgeInsets.only(top: 26.0),
                              child: Text('Fast Food',
                                  style: customFont(
                                    size: 20.0,
                                    color: Colors.white,
                                    weight: FontWeight.bold,
                                  )),
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
                ]),
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

首先，从树中删除两个展开的小部件，因为这里不需要它们，相反，它们会导致诸如“小部件使用不正确”之类的异常。

其次，将左右值更改为大于

0（零），例如 6，然后就可以开始了。

Column(
        children: [
          SingleChildScrollView(
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Stack(
                children: [
                  ...List.generate(
                    10,
                    (index) {
                      return Positioned(
                        top: index * 70.0,
                        left: 6,
                        right: 6,
                        height: 100.0,
                        child: Transform(
                          alignment: Alignment.center,
                          transform: Matrix4.identity()
                            ..setEntry(3, 2, 0.0015)
                            ..rotateX(.6),
                          child: InkWell(
                            onTap: () => print(index),
                            child: Container(
                              alignment: Alignment.topCenter,
                              width: MediaQuery.of(context).size.width,
                              height: 100.0,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                boxShadow: const [
                                  BoxShadow(
                                      spreadRadius: .2,
                                      blurRadius: 1.0,
                                      color: Colors.white)
                                ],
                                borderRadius: BorderRadius.circular(9.0),
                                image: const DecorationImage(
                                  image: NetworkImage(""),
                                  fit: BoxFit.cover,
                                ),
                              ),
                              child: const Padding(
                                padding: EdgeInsets.only(top: 26.0),
                                child: Text(
                                  'Fast Food',
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

快照：

希望回答您的问题并解决问题。