Flutter 如何在SingleChildScrollView的底部定位小部件?
我需要使用Flutter 如何在SingleChildScrollView的底部定位小部件?,flutter,flutter-layout,Flutter,Flutter Layout,我需要使用SingleChildScrollView才能使用,这样我就可以在iOS中的键盘顶部放置一个“完成”按钮(目前使用的是数字键盘) SingleChildScrollView将有一列作为子项,然后在底部放置一个按钮。我尝试使用LayoutBuilder强制执行SingleChildScrollView的高度 LayoutBuilder( 生成器:(BuildContext上下文,BoxConstraints视口Constraints){ 返回SingleChildScrollView(
SingleChildScrollView
才能使用,这样我就可以在iOS中的键盘顶部放置一个“完成”按钮(目前使用的是数字键盘)
SingleChildScrollView
将有一列作为子项,然后在底部放置一个按钮。我尝试使用LayoutBuilder
强制执行SingleChildScrollView
的高度
LayoutBuilder(
生成器:(BuildContext上下文,BoxConstraints视口Constraints){
返回SingleChildScrollView(
子:约束框(
限制条件:
BoxConstraints(最小高度:viewportConstraints.maxHeight),
子:列(
crossAxisAlignment:crossAxisAlignment.stretch,
mainAxisSize:mainAxisSize.max,
儿童:[
列(),
//垫片()?
扁平按钮()
])));
});
我尝试将BoxConstraints
与maxHeight
属性一起使用,但最终当键盘出现时,小部件不会滚动
旁注:脚手架的
ResizeToOvoidBottomInset
和ResizeToOvoidBottomPadding
都设置为true
(默认值)SingleChildScrollView的问题在于它是子对象。
因此,要使自动大小小部件介于两者之间,我们需要使用MediaQuery
来获得屏幕高度&SizedBox
来展开-SingleChildScrollView
此处按钮将位于屏幕底部
工作代码:
double height = MediaQuery.of(context).size.height;
SingleChildScrollView(
child: SizedBox(
height: height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
Text('Dummy'),
Text('Dummy'),
Text('Dummy'),
],
),
Spacer(),
FlatButton(
onPressed: () {},
child: Text('Demo'),
)
])),
)
double height=MediaQuery.of(context).size.height;
SingleChildScrollView(
孩子:大小盒子(
高度:高度,,
子:列(
crossAxisAlignment:crossAxisAlignment.stretch,
mainAxisSize:mainAxisSize.max,
儿童:[
纵队(
儿童:[
文本('Dummy'),
文本('Dummy'),
文本('Dummy'),
],
),
垫片(),
扁平按钮(
按下:(){},
子:文本('Demo'),
)
])),
)
选择的答案实际上不起作用,因为使用大小框将列的最大大小限制为屏幕的高度,因此您不能在其中放入所需的小部件(否则它们将在不可滚动的情况下离开屏幕)
无论列中有多少小部件,此解决方案都会起作用:
重要提示:仅当列中的小部件具有固定高度(例如TextInputField没有固定高度)时,它才起作用。如果它们具有可变高度,请使用固定高度的容器包装它们。您可以使用此解决方法,也可以在SingleChildScrollView中使用padding属性,如下所示:
SingleChildScrollView(
padding: EdgeInsets.only(top: height),
child: yourWidgets(),
“高度”是指距离顶部的距离。您还可以使用此行获取手机屏幕高度:
double height = MediaQuery.of(context).size.height;
我只是复制并粘贴了我找到的最好的解决方案,引用自@Quentin,@NikitaZhelonkin在Github的Flatter 18711期中详细阐述的。这就是完美的解决方案
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AppBar'),
),
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Text('header'),
Expanded(
child: Container(
color: Colors.green,
child: Text('body'),
),
),
Text('footer'),
]
),
)
)
);
})
);
}
}
非常感谢。我在我的项目的其他部分使用了相同的解决方案,但我不知道为什么我决定把这个复杂化。当键盘打开时,它说:“溢出104像素。”但我想,SingleChilScrollview应该是滚动的。但在这种情况下,scrollview不是scrollingHow来实现堆栈内部?