Flutter语言 - 我可以让SingleChildScrollView填充可用空间吗?

Question

我有一个Flutter应用程序，我正在为Android构建。结构大致如下:

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: SingleChildScrollView(
child: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: ...
),
)
);
}

这里的目标是让渐变背景填充应用程序栏下方的所有屏幕，如果内容大于该空间，则使其可滚动。

如果省略SingleChildScrollView，则Container填充空格。当然，如果它溢出，就没有滚动。使用上面的代码，滚动视图在小屏幕上发挥作用，但在大屏幕上，渐变背景不会填充整个可用区域。

如果我像这样改变它:

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: Column(children: [
SingleChildScrollView(
child: ...
),
Expanded(child:Container())
]),
)
);
}

则渐变填充背景，但滚动视图没有做正确的事情-内容溢出屏幕，但不能滚动。我如何让它两者兼得?

Answer 1

你面临这个问题的原因是你的容器在SingleChildScrollView小部件并沿着滚动SingleChildScrollView小部件。移除SingleChildScrollView将导致renderflex溢出错误

关键词将抛出incorrect use of ParentDataWidget

另外，你已经在列中添加了SingleChildScrollView小部件你必须交换这些

这是我给的一个例子，它将帮助你实现它。

Widget build(BuildContext context) {
return Scaffold(
body: Container(
// Add The Container gradient here
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 100,
width: 50,
color: Colors.red,
),
Container(
height: 100,
width: 50,
color: Colors.blue,
),
Container(
height: 1000,
width: 50,
color: Colors.yellow,
),
Container(
height: 1000,
width: 50,
color: Colors.orange,
),
],
)),
));
}