SingleChildScrollView + Column:溢出或忽略 mainAxisAlignment [英] SingleChildScrollView + Column: either overflow or ignore mainAxisAlignment

问题描述

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

[SOLVED] I've updated dartpad with the working solution https://dartpad.dartlang.org/42415ce855bfcdc148eb03872c170c77

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

run the code below on dartpad and resize the browser page vertically;

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

you will notice in the example on the right that

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

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

before posting this question I did some research

SingleChildScrollView inside Row

SingleChildScrollView切割"屏幕

SingleChildScrollView 不滚动

SingleChildScrollView inside Row

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

and either the case is similar, but incompatible with my case

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

or just dodge the problem allthogether replacing one of the widget with a different one

(我的情况改变了结果)；

(with altered result for my case);

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

I tried wrapping either the column and the scsv with a combination of

扩展, ConstrainedBox, Container 和 SizedOverflowBox

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

without success, either breaking the app or losing the spaceEvenly property

我可以帮忙，谢谢

推荐答案

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

Instead of SingleChildScrollView, you can give a shot to CustomScrollView like this;

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

这篇关于SingleChildScrollView + Column:溢出或忽略 mainAxisAlignment的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！