我正在try 创建这个可滚动的堆叠列表:下面是图像. 想要的结果.

enter image description here

当我增加物品数量时,列出的物品会毁容,如果有人能帮助我,我将不胜感激. 增加itemCount时的结果

enter image description here

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

推荐答案

首先,从树中删除两个展开的小部件,因为这两个小部件在这里并不需要,相反,它们会导致像"Incorrect use of widgets"这样的异常.

其次,将定位的小部件的向右和向左的值更改为大于100的值,如101,这样就可以了.

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

Snapshot:

enter image description here

  • 希望这回答了你的问题,解决了问题.

Flutter相关问答推荐

Flutter -修改子小部件中的AppBar

为什么Flutter 翼扩展卡有上下边框?

将图标呈现在Flutter 克牌小工具的角落上

如何在抖动中预加载一条路由,或者即使在屏幕外也保持加载小工具?

如何在Flutter 安全存储器中存储对象值?

如何画三角形的圆角?

dart /长笛中的返回早期模式和拆分方法

如何使 dart 函数变得通用?

为什么我的Flutter 动画过渡没有发生?

如何在flutter中更改showModalBottomSheet小部件中CheckboxListTile小部件的值?

Dart/Flutter 泛型:类型 '(SearchFilterItemModel) => String' 不是类型 '(SearchFilterItemModel) => String' 的子类型

如何修改来自合并 list 的 Android list 权限?

如何将行推到列的底部

有没有办法为文本中的下划线创建自定义样式?

SfCircularChart 周围的额外间距

Future.wait() 中的 futures 可以顺序调用吗?

如何让多个图标转到不同的网址

如何将图像网络装箱到具有边界半径的容器中

Flutter Firebase:如何判断返回值是否是特定对象

参数类型Future>不能分配给参数类型Future>?