当我尝试通过添加.rglob('*.txt')
来使页面的一部分能够滚动时,我总是遇到错误。
这就是现在的样子:
所以红线之间的部分是我希望能够滚动的部分,因为我稍后会添加更多内容。这是我当前的代码:
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
使想要滚动的部分滚动,但这是使用 FIXED 固定大小的容器,其中ListView
用于已完成的样式。有没有固定高度的方法?如您所见,当我固定高度时,还有一些额外的未使用空间:
MediaQuery
答案 0 :(得分:1)
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')),
),
],
)
如果要在多个小部件之间滚动视图,这是最好的方法