我正在使用下面的代码,但我在某些设备中遇到了这个问题。滚动视图的正确使用方法是什么?我是颤振世界的新手,所以我有点困惑。我也尝试过
SingleChildScrollView
,但对我没有帮助,或者也许我不知道正确的使用方法。
return Scaffold(
key: _scaffoldKey,
resizeToAvoidBottomPadding: false,
body: LoadingIndicatorPage(
loading: _loading,
child: Stack(
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.brown,
image: new DecorationImage(
image: new ExactAssetImage("graphics/register_bg.png"),
fit: BoxFit.cover,
),
),
),
Padding(
padding: EdgeInsets.only(
left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
child: AnimatedOpacity(
opacity: _currentOpacity,
duration: const Duration(seconds: 1),
child: Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50),
child: Text(
AppLocalizations.of(context).registerTitle,
style: TextStyle(fontSize: 32),
),
),
Padding(
padding: const EdgeInsets.only(top: 50.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
AppLocalizations.of(context).registerNameHint,
style: TextStyle(color: brownishGrey),
),
),
),
TextFieldInput(
inputType: TextInputType.text,
textEditingController: nameController,
),
Padding(
padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
AppLocalizations.of(context)
.registerPhoneNumberHint,
style: TextStyle(color: brownishGrey),
),
),
),
TextFieldInput(
inputType: TextInputType.text,
textEditingController: phoneNumberController,
),
Padding(
padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
AppLocalizations.of(context).registerEmailHint,
style: TextStyle(color: brownishGrey),
),
),
),
TextFieldInput(
inputType: TextInputType.text,
textEditingController: emailController,
),
Padding(
padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
AppLocalizations.of(context)
.registerPasswordHint,
style: TextStyle(color: brownishGrey),
),
),
),
TextFieldInput(
inputType: TextInputType.text,
textEditingController: passwordController,
obscureText: true,
),
Padding(
padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
AppLocalizations.of(context)
.registerRepeatPasswordHint,
style: TextStyle(color: brownishGrey),
),
),
),
TextFieldInput(
inputType: TextInputType.text,
textEditingController: repeatPasswordController,
obscureText: true,
),
Padding(
padding: EdgeInsets.only(top: INPUT_FIELDS_SPACING),
child: CheckboxListTile(
title: Text(
AppLocalizations.of(context).registerTerms,
style: TextStyle(color: brownishGrey),
),
value: true,
onChanged: (bool value){},
),
)
],
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Button(
text: AppLocalizations.of(context).registerRegister,
buttonOnPressed: _createAccount),
),
Padding(
padding: EdgeInsets.only(top: 15.0, bottom: 15),
child: GestureDetector(
child: Text(AppLocalizations.of(context).registerLogin,
style: TextStyle(color: textGreen)),
onTap: () {
Navigator.pop(context);
},
),
),
],
),
),
),
],
),
),
);
这是注册屏幕代码。
您有两个嵌套的
Columns
,删除其中一个,因为没有必要。
用
Column
包裹SingleChildScrollView
:
body: Stack(
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.brown,
image: new DecorationImage(
image: new ExactAssetImage("graphics/register_bg.png"),
fit: BoxFit.cover,
),
),
),
Padding(
padding: EdgeInsets.only(left: LEFTRIGHT_PADDING, right: LEFTRIGHT_PADDING),
child: AnimatedOpacity(
opacity: _currentOpacity,
duration: const Duration(seconds: 1),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
...
使用列表视图而不是列,它不需要将列包装在单个子滚动视图中
而不是堆栈使用列,只需将
resizeToAvoidBottomPadding
更改为 true,然后调整正文大小以避免与屏幕键盘重叠。这可以防止键盘遮挡主体内部的小部件。
作为参考,这是Flutter推荐的解决方案。什么对我有用。
TL;DR: 将
Expanded
小部件替换为 Flexible
并设置 fit: FlexFit.loose
并设置列 mainAxisSize: MainAxisSize.min
。
Comlumn(
mainAxisSize: MainAxiseSize.min,
Children: [
Flexible(
fit: FlexFit.loose,
child: Container(...),
)
]
)
这是 OP 收到的错误(基于下面的评论)。错误消息描述了发生这种情况的原因。
我的答案来自最后一段。
RenderFlex 子级具有非零弯曲,但传入的高度约束是无界的。
当列位于不提供有限高度的父级中时 约束,例如如果它是垂直滚动的,它会尝试 沿垂直轴收缩其子项。设置弹性 子项(例如使用 Expanded)表示该子项要扩展到 填充垂直方向的剩余空间。这两个 指令是相互排斥的。如果父母要将其收缩包装 子级,子级不能同时扩展以适应其父级。
考虑将 mainAxisSize 设置为 MainAxisSize.min 并使用 FlexFit.loose 适合灵活的孩子(使用灵活而不是 比扩展)。这将允许灵活的孩子调整大小 他们自己小于他们会的无限剩余空间 否则会被强制采取,然后会导致RenderFlex 收缩包裹孩子而不是扩大以适应最大值 父母提供的约束。