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

jtoj6r0c  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(153)

我正在尝试创建这个可滚动的堆栈列表:下面是图像。期望的结果。


的数据
当我增加项目计数,列出的项目得到毁容,我会很感激,如果任何一个人可以帮助我与它。


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

字符串

3htmauhk

3htmauhk1#

首先,从树中删除两个扩展的小部件,因为这里不需要它们,相反,它们会导致异常,如 “小部件使用不正确”
其次,将Positioned小部件的右值和左值更改为大于 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,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

字符串

快照:


的数据

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

相关问题