如何将 SingleChildScrollView 居中但使背景拉伸以填满屏幕？
Posted
技术标签:
【中文标题】如何将 SingleChildScrollView 居中但使背景拉伸以填满屏幕？【英文标题】：How to Center SingleChildScrollView but make background stretch to fill screen? 【发布时间】：2019-10-23 03:48:24 【问题描述】：我正在使用 Flutter for web 来制作网站。当用户像普通网站一样向下滚动时，我想让网页滚动。
我尝试使用Stack，这样我就可以在小部件后面放置自定义背景。当用户滚动时，这个背景必须滚动（必须坚持前面的小部件，以便背景改变）。
（我无法使用Scaffold 设置背景颜色，因为我的背景是使用CustomPainter）
但我想在网页上居中小部件，所以我将 SingleChildScrollView 包装在 Center 小部件中。但现在在大横屏上CustomPaintWidget() 不是全屏（有空白）。我尝试用Container 替换我的CustomPaintWidget() 来测试，但同样的问题。
这是我的代码：
Center(
child: SingleChildScrollView(
child:Stack(children: <Widget>[
CustomPaintWidget(),
Widgets(),
],),
有人知道解决办法吗？
如何使小部件居中同时使背景拉伸？
谢谢！
【问题讨论】：
【参考方案1】：我知道现在回答为时已晚，但将来可能需要它
你必须使用Stack
例如：
你的主类：
class _BodyState extends State<Body>
@override
Widget build(BuildContext context)
return Scaffold(
body: Stack(
children: [
ScrollViewClass(),
Column(
children: [
//YOUR ITEMS
]),
);
滚动视图类：
class ScrollViewClass extends StatefulWidget
@override
_ScrollViewClassState createState() => _ScrollViewClassState();
class _ScrollViewClassState extends State<ScrollViewClass>
@override
Widget build(BuildContext context)
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 260, bottom: 100),
child: ListView(
children: [
Container(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height),
child: Column(
children: [
//ADD YOUR ITEMS LIKE IMAGE, TEXT, CARD ETC...
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Image.asset('assets/app_name.png')),
Center(child: Text('fdgdfg')),
Center(child: Text('fdgdfg')),
],
)),
),
)
],
),
));
【讨论】：
【参考方案2】：阅读那篇文章，我想这就是你所需要的https://medium.com/@swav.kulinski/spike-parallax-in-flutter-seven-lines-of-code-16a1890d8d32
【讨论】：
【参考方案3】：SingleChildScrollView 根据定义 shriknwraps 它是孩子。
你应该尝试的是
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
//Use MediaQuery.of(context).size.height for max Height
constraints: BoxConstraints(minHeight: MediaQuery.of(context).size.height),
child: Center(
child: //Widget,
),
),
);
【讨论】：
感谢您的回复！ MediaQuery.of(context).**size**.height。但现在屏幕上什么都没有显示。 不错！尝试了其他一些复杂的解决方案，但没有奏效。但确实如此！【参考方案4】：我认为您可以尝试以下方法：
@override
Widget build(BuildContext context)
return Scaffold(
body: Stack(
children: <Widget>[
CustomPaintWidget(),
Center(
child: SingleChildScrollView(
child: Widgets(),
),
)
],
));
【讨论】：
感谢您的回复！我已经尝试过这个解决方案。它解决了背景拉伸，但现在滚动时背景不移动。所以背景保持在同一个地方，但顶部的小部件是移动的。这不像普通网页。 你需要滚动吗？一个用于 Widgets()，一个用于背景？ 我认为不需要 2 个卷轴。我只想制作网页，例如：codemagic.io。有背景和前景。滚动时，两者都在移动（它们粘在一起）。 您正在寻找视差效果以上是关于如何将 SingleChildScrollView 居中但使背景拉伸以填满屏幕？的主要内容，如果未能解决你的问题，请参考以下文章
如何使 SingleChildScrollView 从底部开始？
Flutter：如何自动滚动到 SingleChildScrollView 的末尾
TextField 获得焦点时如何滚动到 SingleChildScrollView 的底部？
如何在 Flutter 中自动滚动到 SingleChildScrollView 内的行的位置