flutter - 如何将 ScrollView 放在 flutter 的堆栈小部件中

Question

我正在制作一个 flutter 应用程序，其中我使用 body 作为堆栈，在这个堆栈中我有两个 child 。一个是主体，另一个是屏幕顶部的后退按钮。堆栈的第一个 child 是 ScrollView 。这是我的构建方法。

  Widget build(BuildContext context) {

    return Scaffold(
      //debugShowCheckedModeBanner: false,
      key: scaffoldKey,
      backgroundColor: Color(0xFF5E68A6),

        body: Stack(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.fromLTRB(0.0, 10.0  , 0.0 , 0.0 ),
              height: double.infinity,
              child:CustomScrollView(
                slivers: <Widget>[

                  new Container(
                    margin: EdgeInsets.all(15.0),
                    child:Text(getTitle(),
                      style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.bold,color: Colors.white),
                    ),
                  ),


                  //middle section
                  _isLoading == false ?
                  new Expanded(child:  GridView.builder(
                      itemCount: sub_categories_list.length,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      itemBuilder: (context, position){
                        return InkWell(
                          child: new Container(
                            //color: Colors.white,
                            padding: EdgeInsets.all(20),
                            margin: EdgeInsets.all(10),
                            height: 130,
                            width: 130,
                            child: new Center(
                                child :
                                Text(sub_categories_list[position].name,
                                  style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold),
                                )
                            ),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.all(Radius.circular(16)),

// border: Border.all(color: Colors.black, width: 3),
                            ),
                          ),
                          onTap: () {
                            //write here
                            // Fluttertoast.showToast(msg: "You clicked id :"+sub_categories_list[position].cat_id.toString());
                            Navigator.pushNamed(context, '/advicemyself');


                          },
                        );

                      }

                  ))
                      :
                  CircularProgressIndicator(),


                  Container(

                    margin: EdgeInsets.all(18.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[

                        new Column(

                          children: <Widget>[
                            Image.asset('assets/bt1.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("FIND HELP",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        new Column(

                          children: <Widget>[
                            Image.asset('assets/bt2.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("HOME",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        new Column(
                          mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                          children: <Widget>[

                            Image.asset('assets/bt3.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("CALL 999",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )

                          ],
                        ),

                      ],
                    ),

                  ),
                ],
                      ),
            ),

            Positioned(
              left: 10,
              top: 30,
              child: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: () => {
               //go back

                },
                color: Colors.white,
                iconSize: 30,
              ),
            ),
            //                                                                                                                makeview()
          ],
        ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
       }

我也试过使用 SingleChildScrollView 但这也不起作用。我在这里做错了什么？
这是我想要制作的设计的链接。

https://imgur.com/a/w7nLmKC

背面应该在 ScrollView 上方，所以我使用了堆栈小部件。

Answer 1

运行您的示例代码，似乎不需要重叠小部件。使用 Stack似乎是不必要的。你可以做的一种方法是使用 Column小部件，并使用 Expanded如你所见。

Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Widget(), // back button goes here
        CustomScrollView(...),
      ],
    ),
  );
}

否则，如果您确实需要使用 Stack，滚动功能应该可以正常工作。我已经在本地尝试过，并且 Stack 小部件不会干扰 Slivers、ListView 和 GridView 的滚动。

Stack(
  children: [
    /// Can be GridView, Slivers
    ListView.builder(),
    /// Back button
    Container(),
  ],
),