时间戳

首页 > 解决方案 > FittedBox 内的 ListView 不可滚动

flutter - FittedBox 内的 ListView 不可滚动

问题描述

虽然FittedBox缩放ListView正确，但我无法水平滚动 ListView：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      home: Scaffold(
          body: Container(
        height: 200,
        child: FittedBox(
          alignment: Alignment(-1, -1),
          fit: BoxFit.fitHeight,
          child: Container(
            height: 100,
            child: ListView.builder(
                itemCount: 20,
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemBuilder: (context, index) => Container(
                    width: 100,
                    height: 100,
                    child: Text(index.toString()),
                    decoration: BoxDecoration(border: Border.all(width: 3, color: Colors.red)))),
          ),
        ),
      )),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

相反，会显示前几个可见的容器。ListView 在没有 FittedBox 的情况下正确滚动。

有趣的是，如果我指定一个带有 initialScrollOffset 的 ScrollController()，ListView 最初会显示在指定的滚动偏移量处，然后动画回到偏移量 0。

标签： flutterdart

解决方案

我最终将每个 ListView 项目包装在 FittedBox 中。在我的实际代码中，每个列表项都很复杂，因此将它们包装在 FittedBox 中可以让我响应地缩放它们。如果我能够在能够滚动的同时执行上述操作，那就太好了。

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: MyCustomScrollBehavior(),
      home: Scaffold(
          body: Row(
        children: [
          SizedBox(width: 30),
          Expanded(
            child: Container(
              height: 200,
              child: ListView.builder(
                  itemCount: 20,
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemBuilder: (context, index) => Container(
                        height: 200,
                        child: FittedBox(
                          alignment: Alignment.topLeft,
                          fit: BoxFit.fitHeight,
                          child: Container(
                              width: 100,
                              height: 100,
                              child: Text(index.toString()),
                              decoration: BoxDecoration(border: Border.all(width: 3, color: Colors.red))),
                        ),
                      )),
            ),
          ),
        ],
      )),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

推荐阅读