我不能在 ScrollView 中使用 GridView，我只能使用展开后的 GridView。如何在页面中添加真正的 ScrollView？

Question

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

  GlobalKey<ScaffoldState> _scaffold = GlobalKey<ScaffoldState>();
  bool _data = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      key: _scaffold,
      drawer: Menu(),
      appBar: AppBar(
          leading: SvgPicture.asset('assets/images/sirket-amblem.svg', width: 10.0,), 
          centerTitle: true,title: Text('Anasayfa', style: TextStyle(color: Colors.indigo, fontWeight : FontWeight.w700,),),
          actions: <Widget>[
              IconButton(
                onPressed: () {
                  _scaffold.currentState.openDrawer();
                },
                icon: Icon(Icons.menu, 
                color: Colors.indigo,),),

              IconButton( onPressed: () {
                  _data = false;
                  setState(() {});
                  AncWidget.of(context).transaction.request().then((request){
                    _data = request;
                    setState(() {});
                  });
                },
                icon: Icon(Icons.refresh, 
                color: Colors.indigo,),)
          ],
          ),
      body: _data 
          ? Container(
              child : SingleChildScrollView(child: Column (
                  mainAxisAlignment: MainAxisAlignment.start,
                  children:[
                    Container(
                      height: 200.0,
                      width: double.maxFinite,
                      child: MainSlider(), ),
                      Padding(
                            padding: EdgeInsets.only(top: 15.0), 
                            child : Image.asset('assets/images/main_chart.png', width: 500.0, height: 222.0,),),
                     GridView.count(
                          crossAxisCount: 3,
                          mainAxisSpacing: 9.0,
                          crossAxisSpacing: 9.0,
                          childAspectRatio: 1.2,



                          physics: NeverScrollableScrollPhysics(),
                          padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0, bottom: 0.0),
                          children: List.generate(choices.length, (index) {
                              return Center(
                                child: ChoiceCard(choice: choices[index]),                
                              );
                          }
                          )
                    )  
                    ], 
                )

                ,)  
          ) 
      : Center(child: CircularProgressIndicator(),),     
    ); 
  } 
} 


class Choice {
  const Choice ({this.title, this.icon});

  final String title;
  final String icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'YÖNETİM', icon: 'assets/images/icons/menu/kurumsal.svg'),
  const Choice(title: 'SENET', icon: 'assets/images/icons/menu/hisse-senedi.svg'),
  const Choice(title: 'FİNANSAL', icon: 'assets/images/icons/menu/finansal-raporlar.svg'),

  ];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
        return Card(
          color: Color(0xFFE6E8F0), 
          child: Center(child: Column( 
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(child: SvgPicture.asset(choice.icon, color: Color(0xFF324684), width: 35.0,)),
                Padding(padding: EdgeInsets.only(left: 7.0, right: 7.0, bottom: 9.0), child : Text(choice.title ,style: TextStyle(fontSize: 10.0, color: Color(0xFF324684), fontFamily: 'ProximaNova-Regular', fontWeight: FontWeight.w700), textAlign: TextAlign.center,)),
          ]
        ),
      )
    );
  }
}


//(Another Code (working but no scrollView. I need ScrollView))
/*
Expanded(
                        child :Container(
                      height: 200.0,
                      width: double.maxFinite,
                      child: MainSlider(), 
                    ),
                      ),
                    Expanded(
                        child : Padding(
                            padding: EdgeInsets.only(top: 15.0), 
                            child : Image.asset('assets/images/main_chart.png', width: 500.0, height: 222.0,),)
                      ),
                    //Padding(padding: EdgeInsets.only(top: 10.0),),
                    Expanded(
                        child : GridView.count(
                          crossAxisCount: 3,
                          mainAxisSpacing: 9.0,
                          crossAxisSpacing: 9.0,
                          childAspectRatio: 1.2,

                          physics: NeverScrollableScrollPhysics(),
                          padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0, bottom: 0.0),
                          children: List.generate(choices.length, (index) {
                              return Center(
                                child: ChoiceCard(choice: choices[index]),                
                              );
                          }
                          )
                    )  
                      ),
*/

我想在 Flutter 中添加 ScrollView，但是我有 GridView。当我有 GridView 时，如何在 Page 中添加 ScrollView？我为 ButtonList 创建了 GridView，以便在我的主页中点赞菜单。

例子

.  .  .
.  .  .
.  .  .

像表格，像 GridView。

Answer 1

您在GridView.count 中使用physics: NeverScrollableScrollPhysics(),，但在SinngleChildScrollView 中使用ListView 或GridViewCount 您必须使用physics: ClampingScrollPhysics(), physics: ClampingScrollPhysics(), 启用平滑滚动，您还错过了GridView.count 中的shrinkWrap: true,在GridView.count中添加这两个项目

Answer 2

使用CustomScrollView 和SliverGridView

示例代码：

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverToBoxAdapter(
        child: Container(
          height: 200.0,
          width: double.maxFinite,
          child: Text("Slider"),
        ),
      ),
      SliverToBoxAdapter(
        child: Padding(
          padding: EdgeInsets.only(top: 15.0),
          child: Image.asset(
            'assets/images/main_chart.png',
            width: 500.0,
            height: 222.0,
          ),
        ),
      ),
      SliverGrid.count(
        crossAxisCount: 3,
        mainAxisSpacing: 9.0,
        crossAxisSpacing: 9.0,
        childAspectRatio: 1.2,
        children: <Widget>[
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
        ],
      ),
    ],
  ),
);

您可以使用SliverList 来避免将每个单独的小部件包装在列表中

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildListDelegate([
          Container(
            height: 200.0,
            width: double.maxFinite,
            child: Text("Slider"),
          ),
          Padding(
            padding: EdgeInsets.only(top: 15.0),
            child: Image.asset(
              'assets/images/main_chart.png',
              width: 500.0,
              height: 222.0,
            ),
          ),
        ]),
      ),
      SliverGrid.count(
        crossAxisCount: 3,
        mainAxisSpacing: 9.0,
        crossAxisSpacing: 9.0,
        childAspectRatio: 1.2,
        children: <Widget>[
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
          RaisedButton(child: Text("Button"), onPressed: () {}),
        ],
      ),
    ],
  ),
);