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

Question

当我尝试通过添加 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]);                
                    }
                  ),
                ),                                   
              ],
            );
        }                 
      } 
    },
  ),
),

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

如果您想在多个小部件之间 ScrollView ，这是最好的方法