当我尝试通过添加 SingleChildScrollView 使页面的一部分能够滚动时，我不断收到错误消息。
这就是现在的样子:
所以红线之间的部分是我希望能够滚动的部分，因为我稍后会添加更多内容。这是我当前的代码:
class _NonAdminFlightPageState extends State<NonAdminFlightPage> {
@override
void initState() {
super.initState();
}
String _dateSelected = null;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: blue,
body:
SingleChildScrollView(
child: Center(
child:Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/FlightBackground.jpg",
),
fit: BoxFit.fitHeight,
),
)
),
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration:BoxDecoration(color: blueTrans),),
),
Align(
alignment:Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width/1.2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(flex:2,child: SizedBox(),),
StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) return new Text('${snapshot.error}');
if(snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
}
return Theme(
data: ThemeData(canvasColor: blackTrans2, brightness: Brightness.dark),
child:Container(
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child:DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: _dateSelected,
hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
isDense: false,
onChanged: (String newValue){
setState(() {
_dateSelected = newValue;
});
},
items: snapshot.data.documents.map((DocumentSnapshot document){
return DropdownMenuItem<String>(
value: document.documentID,
child: AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,),
);
}).toList(),
),
),
)
)
);
},
),
Expanded(child: SizedBox(),),
Expanded(
flex: 25,
child:StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.document(_dateSelected).snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) {
return new Text('${snapshot.error}');
} else if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
} else {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
default:
var doc = snapshot.data;
// can execute animation here to make select flight glow
if (_dateSelected == null) {
return (Center(child: SizedBox(),));
}
return Column(
children: <Widget>[
Expanded(
flex: 8,
child: Container(
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Column(
children: <Widget>[
Expanded(child: SizedBox(),),
Expanded(flex:1,child:AutoSizeText(NA_FLIGHT_PAGE_PATTERN, style: TextStyle(color: white,),textAlign: TextAlign.center,),),
Expanded(child:Divider(color: white,)),
Expanded(flex:8,child:ListView.builder(
padding: EdgeInsets.only(top: 0.0),
scrollDirection: Axis.vertical,
shrinkWrap: false,
itemCount: _dateSelected == null ? 0 : doc["patterns"].length ,
itemBuilder: (BuildContext context, int index) {
var patterns = doc["patterns"];
return buildPatternTile(patterns[index]);
}
),),
Expanded(child: SizedBox(),),
],
),
),
),
],
);
}
}
},
),
),
Expanded(child: SizedBox(),),
],
),
),
),
],
)
)
)
);
}
我尝试过的:
Expanded(
flex: 25,
child:SingleChildScrollView(
child:StreamBuilder<DocumentSnapshot>(
.....
我试图将第二个 StreamBuilder 包装在 SingleChildScrollView 中，但我抛出了这个异常:
I/flutter ( 2714): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 2714): Another exception was thrown: RenderBox was not laid out: RenderFlex#bafcc relayoutBoundary=up1 NEEDS-PAINT
I/flutter ( 2714): Another exception was thrown: RenderBox was not laid out: RenderFlex#bafcc relayoutBoundary=up1 NEEDS-PAINT
我设法使用 ListView 使我想要的部分可滚动，但是这是使用 FIXED 容器大小和 MediaQuery for Patterns完成。有没有办法在不固定高度的情况下这样做？正如你所看到的，当我固定高度时有一些额外的未使用空间:
Expanded(
flex: 25,
child:StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.document(_dateSelected).snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) {
return new Text('${snapshot.error}');
} else if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
} else {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
default:
var doc = snapshot.data;
// can execute animation here to make select flight glow
if (_dateSelected == null) {
return (Center(child: SizedBox(),));
}
return ListView(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height*2/3,
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
scrollDirection: Axis.vertical,
shrinkWrap: false,
itemCount: _dateSelected == null ? 1 : doc["patterns"].length + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Column(
children: <Widget>[
ListTile(
selected: false,
title: AutoSizeText(
NA_FLIGHT_PAGE_PATTERN,
maxLines: 1,
style: TextStyle(
color: white,
),
textAlign: TextAlign.center,
),
),
Divider(color: white,)
],
);
}
index -= 1;
var patterns = doc["patterns"];
return buildPatternTile(patterns[index]);
}
),
),
],
);
}
}
},
),
),
最佳答案
SingleChildScrollView当你只有一个盒子时使用。我会建议你使用 ListView
这里是你可以直接表达观点的例子
ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
如果您想在多个小部件之间 ScrollView ，这是最好的方法
关于flutter - 尝试使部分页面滚动时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56765119/