【问题标题】:ListView loads images but wont scrollListView 加载图像但不会滚动
【发布时间】:2021-11-15 01:47:42
【问题描述】:

以下 Container 位于 Columnd 中。我刚刚添加了以下代码部分,因为我认为这是与此问题唯一相关的部分(我希望如此)。

添加 ListView 后,图像被加载并显示。但是,滚动未启用,并非所有图像都可以渲染。我不知道这个问题是否与我使用 ListView 的方式有关,或者与在 GetX Obx 上使用它有关。

我的颤振版本是

[✓] Flutter(通道稳定,2.5.0,在 Ubuntu 20.04.3 LTS 5.11.0-34-generic,语言环境 en_US.UTF-8)

有什么想法吗?

Container(
                    height: 180,
                    child: Row(
                      children: [
                        Expanded(
                          child: Obx(() {
                            if (editProductController.imgDataList.value != []) {
                              final imgWidgets =
                                  editProductController.imgDataList.value
                                      .map(
                                        (imgData) => Container(
                                          width: 180,
                                          child: Image.memory(
                                            imgData,
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                      )
                                      .toList();
                              return Container(
                                width: 100,
                                child: ListView.builder(
                                  padding: EdgeInsets.all(8),
                                  itemCount: imgWidgets.length,
                                  scrollDirection: Axis.horizontal,
                                  //physics: AlwaysScrollableScrollPhysics(),
                                  itemBuilder: (context, index) =>
                                      imgWidgets[index],
                                ),
                              );
                            } else {
                              return Center(
                                child: Image.asset(
                                  'assets/images/image_placeholder.jpg',
                                ),
                              );
                            }
                          }),
                          flex: 2,
                        ),
                        Expanded(
                          child: Container(
                            height: 60,
                            child: CustomButton(
                                text: product != null
                                    ? "Modificar Imagenes"
                                    : "Agregar Imagen",
                                onTap: () async {
                                  try {
                                    List<XFile>? pickedFiles =
                                        await ImagePicker().pickMultiImage();
                                    if (pickedFiles != null) {
                                      final imgDataList = <Uint8List>[];

                                      for (final pickedFile in pickedFiles) {
                                        final imgData =
                                            await pickedFile.readAsBytes();
                                        imgDataList.add(imgData);
                                      }

                                      editProductController.imgDataList.value =
                                          imgDataList;
                                    } else {
                                      throw Exception(
                                          'No se pudo cargar las imagenes');
                                    }
                                  } catch (e) {
                                    Get.snackbar(
                                      'Error cargando las imagenes',
                                      e.toString(),
                                    );
                                  }
                                }),
                          ),
                        ),
                      ],
                    ),
                  )

【问题讨论】:

    标签: flutter flutter-getx


    【解决方案1】:

    Flutter 2.5 更新

    请为您的水平滚动添加这些代码

    // Set ScrollBehavior for an entire application.
    MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      // ...
    );
    
    class MyCustomScrollBehavior extends MaterialScrollBehavior {
      // Override behavior methods and getters like dragDevices
      @override
      Set<PointerDeviceKind> get dragDevices => {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          };
    }
    

    另一种方法

    MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, )
    

    更多信息请访问link

    【讨论】:

    • 谢谢!正确的解决方案。
    • 不客气,编码愉快!
    猜你喜欢
    • 1970-01-01
    • 2017-05-04
    • 1970-01-01
    • 2015-10-23
    • 2019-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多