Flutter Flex ListView用于可滚动和响应的页面

有几个细节，但我会试着向你解释.

默认的ListView有一个垂直的ScrollDirection，这是ListView的一个要求，它的子级在滚动方向上有一个不是无穷大的大小，这就是为什么你必须设置高度.这就是为什么你必须在容器的高度上设定一个尺寸.

ListView垂直滚动方向的高度是无限的，而Flex在列中的高度是无限的，这是冲突的.

我认为这将是最好的方式:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: Scaffold(
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    bool isScreenWide = MediaQuery.sizeOf(context).width >= 800;

    return Scaffold(
        body: ListView(
      scrollDirection: isScreenWide ? Axis.horizontal : Axis.vertical,
      children: [
        Flex(
          direction: isScreenWide ? Axis.horizontal : Axis.vertical,
          children: [
            Container(
                color: Colors.blue[100],
                padding: const EdgeInsets.all(20),
                alignment: Alignment.topLeft,
                child: const Padding(
                  padding: EdgeInsets.all(100),
                  child: Text("1"),
                )),
            Container(
                color: Colors.blue[200],
                padding: const EdgeInsets.all(20),
                alignment: Alignment.topLeft,
                child: const Padding(
                  padding: EdgeInsets.all(100),
                  child: Text("2"),
                )),
            Container(
                color: Colors.blue[300],
                padding: const EdgeInsets.all(20),
                alignment: Alignment.topLeft,
                child: const Padding(
                  padding: EdgeInsets.all(100),
                  child: Text("3"),
                )),
            Container(
                color: Colors.blue[400],
                padding: const EdgeInsets.all(20),
                alignment: Alignment.topLeft,
                child: const Padding(
                  padding: EdgeInsets.all(100),
                  child: Text("4"),
                )),
          ],
        ),
      ],
    ));
  }
}