如何在 SingleChildScrollView 中使用展开？

答案就在错误本身。当该列位于可滚动视图中时，该列试图收缩其内容，但是由于您将 Expanded作为该列的子级使用，因此该列的工作方式与试图收缩其子级的列相反。这导致了这个错误，因为这两个指令完全相反。

正如错误日志中提到的，请尝试以下操作:

考虑将 mainAxisSize设置为 MainAxisSize.min(对于列) ，并使用 FlexFit.loose适合灵活性(使用 Flexible而不是 Expanded)。

正如已经指出的，因为您使用的是可滚动的，所以您不能展开到无穷大(理论上来说) ，这就是当您试图展开嵌套在 SingleChildScrollView中的 ListView时所发生的事情。

您可以尝试使用 NestedScrollView，或者，如果它符合您的要求，并且因为您已经注释了这一行:

//height: MediaQuery.of(context).size.width*0.33,

例如，你可以把 ListView换成 ConstrainedBox(或者只是一个普通的 Container) ，而不是 Expanded，就像这样:

 Container(
height: MediaQuery.of(context).size.width*0.33,
child: ListView.builder(
itemCount: commentList.length,
...
)
)

因为您已经在一个可滚动的界面中，所以不会出现小屏幕的问题，因为整个树都是可滚动的。

试试这个,

LayoutBuilder(
builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
Text("Header"),
Expanded(
child: Container(
color: Colors.red,
),
),
Text("Footer"),
],
),
),
),
);
},
)

当我遇到同样的情况时，我从 Git 问题中得到了这个解决方案。我没有 Git 链接。我觉得这能帮到你。

可重用的小部件:

注意: 使用它，仅当其中一个子节点为 Expanded时

import 'package:flutter/material.dart';


class ScrollColumnExpandable extends StatelessWidget {
final List<Widget> children;
final CrossAxisAlignment crossAxisAlignment;
final MainAxisAlignment mainAxisAlignment;
final VerticalDirection verticalDirection;
final TextDirection textDirection;
final TextBaseline textBaseline;
final EdgeInsetsGeometry padding;


const ScrollColumnExpandable({
Key key,
this.children,
CrossAxisAlignment crossAxisAlignment,
MainAxisAlignment mainAxisAlignment,
VerticalDirection verticalDirection,
EdgeInsetsGeometry padding,
this.textDirection,
this.textBaseline,
})  : crossAxisAlignment = crossAxisAlignment ?? CrossAxisAlignment.center,
mainAxisAlignment = mainAxisAlignment ?? MainAxisAlignment.start,
verticalDirection = verticalDirection ?? VerticalDirection.down,
padding = padding ?? EdgeInsets.zero,
super(key: key);


@override
Widget build(BuildContext context) {
final children = <Widget>[const SizedBox(width: double.infinity)];


if (this.children != null) children.addAll(this.children);
return LayoutBuilder(
builder: (context, constraint) {
return SingleChildScrollView(
child: Padding(
padding: padding,
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraint.maxHeight - padding.vertical,
),
child: IntrinsicHeight(
child: Column(
crossAxisAlignment: crossAxisAlignment,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: MainAxisSize.max,
verticalDirection: verticalDirection,
children: children,
textBaseline: textBaseline,
textDirection: textDirection,
),
),
),
),
);
},
);
}
}

我尝试了 Vijaya Ragavan 解决方案，但做了一些调整，它仍然工作。 为了在 SingleChildScrollView中使用 Expanded，我使用了 ConstrainedBox并将其高度设置为屏幕的高度(使用 MediaQuery)。您只需要确保放在 ConstrainedBox中的屏幕内容不会大于屏幕的高度。

否则，将 ConstrainedBox的高度设置为要在屏幕上显示的内容的高度。

SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Text('Hello World!'),
),
],
),
)
)

编辑: 若要减去 AppBar和/或状态栏的高度，请参见下面的步骤:

double screenHeightMinusAppBarMinusStatusBar = MediaQuery.of(context).size.height
- appBar.preferredSize.height
- MediaQuery.of(context).padding.top;

只需将 SingleChildScrollView包装在 Center或 Align元素中。

例如:

  Align(
alignment: Alignment.topCenter,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
...
]
}
}
}

或者

  Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
...
]
}
}
}

诀窍是只在需要时应用 ScrollView，否则就让内容展开。

这种方法很有效:

class ConstrainedFlexView extends StatelessWidget {
final Widget child;
final double minSize;
final Axis axis;


const ConstrainedFlexView(this.minSize, {Key key, this.child, this.axis}) : super(key: key);


bool get isHz => axis == Axis.horizontal;


@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, constraints) {
double viewSize = isHz ? constraints.maxWidth : constraints.maxHeight;
if (viewSize > minSize) return child;
return SingleChildScrollView(
scrollDirection: axis ?? Axis.vertical,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: isHz ? double.infinity : minSize,
maxWidth: isHz ? minSize : double.infinity),
child: child,
),
);
},
);
}
}

用法:

ConstrainedFlexView(600, child: FlexContent())

这将弹性填充所有垂直空间，但一旦小部件是 < 600px，它将切换到一个受限的框 + 滚动视图，允许内容不被挤压太多。

与使用 SingleChildScrollView不同，使用 CustomScrollView和 SliverFillRemaining更容易。

试试这个:

CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
const Text('Header'),
Expanded(child: Container(color: Colors.red)),
const Text('Footer'),
],
),
),
],
)

如果你想要的是:

• 能够使用 SingleChildScrollView 内部的展开来填充剩余的屏幕。
• 不会受到键盘的干扰，也不会隐藏正在编写的 TextFormField，或者调整 SingleChildScrollView 的内容大小。

我也有同样的问题。 以下是我使用过的一种可能有害但对我而言行之有效的解决方案:

import 'package:flutter/material.dart';


class FiniteSizeSingleChildScrollViewNotBotheredByKeyboard
extends StatefulWidget {
final Widget child;


const FiniteSizeSingleChildScrollViewNotBotheredByKeyboard(
{Key? key, required this.child})
: super(key: key);


@override
State<FiniteSizeSingleChildScrollViewNotBotheredByKeyboard> createState() =>
_FiniteSizeSingleChildScrollViewNotBotheredByKeyboardState();
}


class _FiniteSizeSingleChildScrollViewNotBotheredByKeyboardState
extends State<FiniteSizeSingleChildScrollViewNotBotheredByKeyboard> {
double width = 0, height = 0;


@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
if (width != constraints.maxWidth) {
width = constraints.maxWidth;
height = constraints.maxHeight;
}
return SingleChildScrollView(
child: SizedBox(
width: width,
height: height,
child: widget.child,
),
);
});
}
}

这个想法是在 SingleChildScrollView 之前获得可用的大小，然后将这个大小注入到 SingleChildScrollView 内部的 SizedBox 中。另外，为了避免键盘改变这个大小，有一个 if 条件，它可以防止在宽度没有改变的情况下改变高度。

这个自定义小部件的唯一问题是，如果这个小部件中的一个 TextFormField 控制器(让我们称之为小部件 A)调用包含这个小部件 A 的小部件 B 上的 setState，这个小部件 A 本身是与 TextFormField 相关联的键控 Form 的子部件，控制器将触发一个重建，同时键盘将触发小部件 A 的重建，这将生成一个异常。为了避免这种情况，将键控 Form 放在小部件 A (而不是上面)中。

大多数的答案都没有考虑到你有一个文本字段的小部件，所以当键盘打开时，你会遇到内容大小的问题(它会比屏幕高) ，所以你应该至少用(灵活的)包装一个小部件在(扩展的)里面。

Scaffold(
resizeToAvoidBottomInset: true,
body:CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
const TextField(),
Expanded(
child: Column(
children: [
Flexible(child: someWidget()),
]
)
),
],
),
),
],
)
)

您可以简单地将该列包装在一个大小不同的框中，然后给它一个 width和 height，如下所示:

SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.9,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container() //widget here
const Expanded(
child: SizedBox(),
),
Container() //widget here
],
),