SingleChildScrollView + Column：溢出或忽略 mainAxisAlignment

Question

[已解决] 我已使用有效的解决方案更新了 dartpad https://dartpad.dartlang.org/42415ce855bfcdc148eb03872c170c77

---

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

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

SingleChildScrollView 不滚动，Column 溢出

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 inside Row

SingleChildScrollView 'cutting' the screen

SingleChildScrollView is not scrolling

SingleChildScrollView inside Row

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

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

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

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

Expanded、ConstrainedBox、Container 和 SizedOverflowBox

没有成功，要么破坏应用程序，要么丢失spaceEvenly 属性

我可以帮忙，谢谢

Answer 1

SingleChildScrollView 小部件必须是列或行的直接父级，在您的情况下，直接父级是 sizebox 小部件。现在用 sizebox 交换SingleChildScrollView。它会起作用。你可以在DartPad看到整个代码

改成这段代码

SizedBox(
      height: MediaQuery
          .of(context)
          .size
          .height,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        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)
          ],
        ),
      ),
    ),

Answer 2

 SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.95,
              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)
             ],
            ),
          ),
        ),

Answer 3

您可以使用 Align 小部件作为您的 SingleChildScrollView 的祖先，并像这样为孩子提供所需的对齐方式

body: Align(
        alignment: Alignment.topCenter,  // Give it the alignment you need
        child: SingleChildScrollView(
          child: Column(
            children: [
            AnyWidget(),
         ),
       ),
     ],

Answer 4

1. 将行的项目设置为固定高度，在这种情况下应为屏幕宽度 / 2。
2. 使用 ListView 进行滚动

class SandBoxScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Material(
        child: Row(
          children: [
            Container(
                width: MediaQuery.of(context).size.width / 2,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return FlutterLogo(size: 80);
                  },
                  itemCount: 7,
                )),
            Container(
                width: MediaQuery.of(context).size.width / 2,
                child: ListView.builder(
                  itemBuilder: (context, index) {
                    return FlutterLogo(size: 80);
                  },
                  itemCount: 7,
                )),
          ],
        ),
      );
}

Answer 5

你可以像这样给CustomScrollView一个镜头，而不是SingleChildScrollView；

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

Answer 6

请检查一下。

   Row(
      children: [
        Container(
          width: MediaQuery.of(context).size.width * .45,
          child: 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)
              ],
            ),
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width * .45,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            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)
              ],
            ),
          ),
        ),
      ],
    )