尝试使页面部分滚动时出错

时间:2019-06-26 04:20:17

标签: flutter dart

当我尝试通过添加.rglob('*.txt')来使页面的一部分能够滚动时,我总是遇到错误。

这就是现在的样子:

enter image description here

所以红线之间的部分是我希望能够滚动的部分,因为我稍后会添加更多内容。这是我当前的代码:

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

enter image description here

1 个答案:

答案 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')),
    ),
  ],
)

如果要在多个小部件之间滚动视图,这是最好的方法