Question

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

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

您会在右侧的示例中注意到


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，您可以像这样对CustomScrollView进行拍摄；

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

Answer 2

SingleChildScrollView小部件必须是该列或行的直接父级，在这种情况下，直接父级是sizebox小部件。现在将SingleChildScrollView与sizebox交换。它会工作。 dartPad

更改此代码

              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 3

请检查一下。

   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)
              ],
            ),
          ),
        ),
      ],
    )

Answer 4

将行中的项目设置为固定高度，在这种情况下，应为屏幕宽度/ 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

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

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

Answer 6

 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)
             ],
            ),
          ),
        ),

SingleChildScrollView + Column：溢出或忽略mainAxisAlignment

6 个答案: