Блог

Хотя FittedBox масштабируется 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,
      };
}
 

Вместо этого отображаются первые несколько видимых контейнеров. Представление списка прокручивается правильно без соответствующего поля.

Интересно то, что если я укажу ScrollController() с набором initialScrollOffset, представление списка сначала отображается с указанным смещением прокрутки, но затем анимируется обратно со смещением 0.

В итоге я упаковал каждый элемент 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: 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,
      };
}