如何使showBottomSheet的特定部分可滚动

Question

我在单击按钮时打开bottomSheet，我希望将其分为三个不同的部分，最后一部分应该可以滚动。下面是我的代码，并且我溢出错误

 onTap: (){
                     scaffoldKey.currentState
                         .showBottomSheet((context) => Container(
                        height:  MediaQuery.of(context).size.height,
                       color: Colors.red,

                       child: Column(
                         children: <Widget>[
                           Container(
                             height: 100,
                             color: Colors.black,
                           ),
                           Container(
                             height: 120,
                             color: Colors.green,
                           ),
                           Container(
                             height:  MediaQuery.of(context).size.height,
                             child: SingleChildScrollView(
                               physics: BouncingScrollPhysics(),
                               child: Column(
                                children: <Widget>[
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),                <---------I added all  
                                                           these textfield just 
                                                           for demo(copy-paste).
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('2'),
                                  SizedBox(height: 10,),
                                  Text('3'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,),
                                  Text('1'),
                                  SizedBox(height: 10,), Text('1'),
                                  SizedBox(height: 10,),
                                  Text('5'),
                                  SizedBox(height: 10,),





                                ],
                               ),
                             ),
                           )
                         ],
                       ),
                     ));
                   },

我也尝试过使用SingleChildScrollable Widget作为第三部分，而没有将其包装在容器中，但这也没有用。

Answer 1

在您希望可滚动的最后一部分中，使用扩展小部件而不是容器包装SingleChildScrollView，如下所示：

onTap: (){

                 scaffoldKey.currentState
                     .showBottomSheet((context) => Container(
                    height:  MediaQuery.of(context).size.height,
                   color: Colors.red,

                   child: Column(
                     children: <Widget>[
                       Container(
                         height: 100,
                         color: Colors.black,
                       ),
                       Container(
                         height: 120,
                         color: Colors.green,
                       ),
                       Expanded(
                      /// I removed the height value you set as that is no longer needed
                         child: SingleChildScrollView(
                           physics: BouncingScrollPhysics(),
                           child: Column(
                            children: <Widget>[
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),               
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('2'),
                              SizedBox(height: 10,),
                              Text('3'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,),
                              Text('1'),
                              SizedBox(height: 10,), Text('1'),
                              SizedBox(height: 10,),
                              Text('5'),
                              SizedBox(height: 10,),
                            ],
                           ),
                         ),
                       )
                     ],
                   ),
                 ));
           },

现在应该工作！ ：）