[英]Using SingleChildScrollview inside Column widget content is not scrolling
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: Container(
child: Column(
children: <Widget>[
Stack(
fit: StackFit.loose,
children: <Widget>[
HeadersVC(),
Container(
margin: EdgeInsets.only(top: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onPressed: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back,
size: 30,
color: Colors.white,
),
),
Text(
widget.headertitleladderPre,
style: TextStyle(
fontSize: 22.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
)
],
),
SingleChildScrollView(
padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10.0),
),
//******************************************** Date Picker */
TextFormField(
onTap: () async {
FocusScope.of(context).requestFocus(new FocusNode());
_selectDate(context);
},
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.black26, width: 1.5)),
contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
labelText: formatDate(formatedDate),
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black),
suffixIcon: new Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 0.0, right: 0.0, bottom: 0.0),
child: SizedBox(
height: 15,
child: Icon(
Icons.calendar_today,
color: Colors.red,
),
),
)),
),
Padding(
padding: EdgeInsets.only(left: 0.0, top: 10.0),
),
//******************************************** DropDown Button */
Container(
child: DropdownButton(
underline: Container(
height: 1.0,
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.black26, width: 1.5))),
),
value: _selectedladleno,
items: _dropDownladleItems,
onChanged: changedDropDownItem,
isExpanded: true,
isDense: false,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.red,
),
iconSize: 30,
elevation: 12,
style: TextStyle(
fontSize: 15,
),
),
),
//******************************************** Radio Button */
ButtonBar(
alignment: MainAxisAlignment.start,
buttonPadding: EdgeInsets.only(left: 0.0),
children: <Widget>[
Radio(
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
print(_character);
});
},
value: SingingCharacter.New,
activeColor: Colors.red,
),
Text(
"New",
style: TextStyle(fontSize: 13.0),
),
Radio(
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
print(_character);
});
},
value: SingingCharacter.Repair,
activeColor: Colors.red,
),
Text(
"Repair",
style: TextStyle(fontSize: 13.0),
),
Radio(
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
print(_character.toString());
});
},
value: SingingCharacter.OnlyMachineChange,
activeColor: Colors.red,
),
Text(
"Machine Change",
style: TextStyle(fontSize: 13.0),
),
],
),
//******************************************** Machine Number */
TextFormField(
decoration: InputDecoration(
labelText: "Machine Number *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
)
],
),
)
],
),
),
);
}
我有这样的错误：
正在执行热重载... ⣟flutter：==╡ 异常被渲染库捕获 ╞============================ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝颤动：在布局期间抛出以下断言：颤动：一个RenderFlex在底部溢出了158个像素。 flutter: flutter: 相关的导致错误的小部件是： flutter: Column file:///Users/baps/Projects/Flutter%20Projects/TRLApp/trlapp/lib/ladlePreheating.dart:64:16 flutter: flutter: 溢出的RenderFlex具有 Axis.vertical 的方向。 flutter: RenderFlex 溢出的边缘在渲染中被标记为黄色和flutter: black 条纹图案。 这通常是由于 RenderFlex 的内容太大造成的。 flutter：考虑应用一个 flex 因子（例如使用一个 Expanded 小部件）来强制 flutter: RenderFlex 的子级适应可用空间，而不是调整到它们的自然大小。 flutter: 这被认为是一个错误条件，因为它表明存在不能 flutter: seen 的内容。 如果内容合法地大于可用空间，请考虑在将其放入 flex 之前使用 flutter: ClipRect 小部件对其进行裁剪，或者使用可滚动容器而不是 Flex，flutter: 就像 ListView。 flutter：有问题的具体RenderFlex是：RenderFlex#4bdfdrelayoutBoundary=up1 OVERFLOWING：flutter：需要合成 flutter：creator：Column ← Container ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← flutter：CustomMultiChildLayout ← DefaultBuilder ← AnimatedDefaultTextStyle ← flutter: _InkFeatures-[GlobalKey#9c17c 墨水渲染器] ← NotificationListener ← flutter: PhysicalModel ← ⋯ flutter: parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (可以使用size) flutter:constraints:BoxConstraints(0.0<=w<=414.0, 0.0<=h<=736.0) flutter: size: Size(414.0, 736.0) flutter: direction: vertical flutter: mainAxisAlignment : start flutter: mainAxisSize: max flutter: crossAxisAlignment: center flutter: verticalDirection: down flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◢◤◢◢◤◢◢◢◤◢ ◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢ ◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤颤动：========================== ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
错过将 ScrollView 展开为 Column 容器将不知道它需要占用多少空间，因此，它计算的大小大于屏幕大小。
所以只需将 Expanded 放入其中：
...
Expanded(
child: SingleChildScrollView(
padding:...
SingleChildScrollView应该被包裹在Column周围：
Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: Container(
child: SingleChildScrollView( // <--- Put it here.
child: Column( // <--- Your Column.
解决方案：需要在列之前使用 SingleChildScrollView 。如果你想保持分离的堆栈部分，你可以使用 CustomScrollView 。 自定义滚动视图
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.white,
body: SingleChildScrollView(
padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Stack(
fit: StackFit.loose,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onPressed: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back,
size: 30,
color: Colors.white,
),
),
Text(
"headertitleladderPre",
style: TextStyle(
fontSize: 22.0,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
)
],
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
//******************************************** Date Picker */
TextFormField(
onTap: () async {},
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.black26, width: 1.5)),
contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
labelText: "formatedDate",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black),
suffixIcon: new Padding(
padding: const EdgeInsets.only(
top: 0.0, left: 0.0, right: 0.0, bottom: 0.0),
child: SizedBox(
height: 15,
child: Icon(
Icons.calendar_today,
color: Colors.red,
),
),
)),
),
Padding(
padding: EdgeInsets.only(left: 0.0, top: 10.0),
),
//******************************************** DropDown Button */
Container(
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
//******************************************** Radio Button */
ButtonBar(
alignment: MainAxisAlignment.start,
buttonPadding: EdgeInsets.only(left: 0.0),
children: <Widget>[
Text("Radio Here"),
Text(
"New",
style: TextStyle(fontSize: 13.0),
),
Text("One More Radio Here"),
Text(
"Repair",
style: TextStyle(fontSize: 13.0),
),
Text("One More Radio Here"),
Text(
"Machine Change",
style: TextStyle(fontSize: 13.0),
),
],
),
//******************************************** Machine Number */
TextFormField(
decoration: InputDecoration(
labelText: "Machine Number *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
),
TextFormField(
decoration: InputDecoration(
labelText: "Well Block Party *",
labelStyle: TextStyle(
fontFamily: "Montserrat", color: Colors.black)),
)
],
),
),
));
}
避免使用
孩子：ConstrainedBox（约束：BoxConstraints（）），
当我删除这个小部件时，在 SingleChildScrollView 中，渲染错误消失了。
我的布局的示例代码。
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kBackgroundColorGray,
appBar: commonAppBar,
body: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
],
),
),
)
);
}
如何在 SingleChildScrollView 内的列内居中小部件
[英]How to center a widget inside a column inside of a SingleChildScrollView
SingleChildScrollView 不使用堆栈小部件 Flutter 滚动
[英]SingleChildScrollView is not scrolling with Stack Widget Flutter
在 singlechildscrollview 列中调用有状态小部件后颤动中的 RenderFlex 错误
[英]RenderFlex error in flutter after a stateful widget is called inside a singlechildscrollview column
SingleChildScrollView 在嵌套列中不起作用。 我的第二列没有使用 SingleChildScrollView 滚动
[英]SingleChildScrollView not working in a nested Column. My second column is not scrolling using SingleChildScrollView
SingleChildScrollView/Column 内的 ReorderableListView
[英]ReorderableListView inside SingleChildScrollView/Column
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.