flutter - SingleChildScrollView + Column：溢出或忽略 mainAxisAlignment

Question

[已解决] 我已经用工作解决方案更新了 dartpad https://dartpad.dartlang.org/42415ce855bfcdc148eb03872c170c77

---

在dartpad上运行下面的代码并垂直调整浏览器页面的大小；

你会注意到在右边的例子中

SingleChildScrollView不滚动并且列溢出

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: MyHomePage(),
      );
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Material(
        child: Row(
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text('''without wrapping the column in fixed heigth
                   [MainAxisAlignment.spaceEvenly] doesn't work'''),
                  for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
                ],
              ),
            ),
            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('''wrapping the column in fixed heigth
                   it overflow ignoring [SingleChildScrollView]'''),
                    for (int i = 0; i < 7; i++) const FlutterLogo(size: 80)
                  ],
                ),
              ),
            ),
          ],
        ),
      );
}

在发布这个问题之前，我做了一些研究

行内的 SingleChildScrollView

SingleChildScrollView '切割' 屏幕

SingleChildScrollView 不滚动

行内的 SingleChildScrollView

两种情况都相似，但与我的情况不兼容

或者只是躲避问题，将其中一个小部件替换为不同的小部件

（我的情况改变了结果）；

我尝试使用以下组合包装列和 scsv

Expanded、ConstrainedBox、Container和SizedOverflowBox

没有成功，要么破坏应用程序，要么失去spaceEvenly财产

我可以使用一些帮助，谢谢

标签： flutterflutter-layout

Answer 1

代替 SingleChildScrollView，您可以像这样给 CustomScrollView 一个镜头；

return CustomScrollView(
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: [
          // *  YOUR WIDGETS HERE
        ],
      ),
    ),
  ],
);