Question

我正在开发一个flutter应用程序，其中我使用body作为堆栈，在这个堆栈中我有两个孩子。一个是主体，另一个是在屏幕顶部的后退按钮。堆栈的第一个孩子是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

背面应该在滚动视图上方，因此我使用了堆栈小部件。

Answer 1

由于不需要重叠小部件，因此似乎没有必要使用 Stack。一种方法是使用 Column 小部件，并根据需要使用 Expanded。

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

如何将滚动视图放在扑中的堆栈小部件内

1 个答案: