0

我正在制作一个名为 Picfolio 的应用程序，其中我需要多个屏幕，为此我必须在我无法添加的 gridview 下方添加一个凸起的按钮。如何在 gridview 下方的第二个屏幕中添加凸起的按钮，以便按下它，我将被带到第三个屏幕。 这是第二个屏幕的图像，在我要添加凸起按钮的网格视图下方。

代码链接

4

2 回答 2

1

您需要在 Column 小部件中使用Expanded小部件。只需添加 Column 小部件并添加带有 Expanded 小部件包装的 GridView 并添加 Raised Button 就像下面一样。用下面的代码替换 SecondScreen 类中的身体部分。

                      body: Column(
                      children: [
                        Expanded(
                          child: GridView.count(
                            crossAxisCount: 3,
                            crossAxisSpacing: 4.0,
                            mainAxisSpacing: 8.0,
                            children: <Widget>[
                              Image.network("https://lh3.googleusercontent.com/proxy/rnQUFF9vdy469uF5IWs5wbBgL4CeHhqNC5ZD3jYxlPYLf2rVYp_SvThcsoSQ1UbRcZspDRg3VD30ynyt2JTuY0JiXsyNoaXVL8DwfiliaXUbnI9BIyg"),
                              Image.network("https://earthsky.org/upl/2019/04/bluejay-e1554247141817.jpg"),
                              Image.network("https://mcmscache.epapr.in/post_images/website_350/post_16094749/full.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsX7D4Bn3S5lUX6uhXBO1qeu7pvOKLv0npCQ&usqp=CAU"),
                              Image.network("https://s.w-x.co/util/image/w/in-birdspecies.jpg?v=ap&w=980&h=551"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCh5nn0Pd4SiznJazjbkmy9bqcySX3h30adg&usqp=CAU"),
                              Image.network("https://www.galveston.com/wp-content/uploads/2019/12/Flock-of-Birds-Taking-Flight-992.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSG_m9D1JRtm763Aw1sBbSxQJLlZiBdxt8yag&usqp=CAU"),
                              Image.network("https://english.mathrubhumi.com/polopoly_fs/1.2783625.1525320130!/image/image.jpg_gen/derivatives/landscape_894_577/image.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQohIWUXQnoVAmRrAYL0gbRowatt4DSDOl4zQ&usqp=CAU"),
                              Image.network("https://9b16f79ca967fd0708d1-2713572fef44aa49ec323e813b06d2d9.ssl.cf2.rackcdn.com/1140x_a10-7_cTC/Audubon-wood-thrush-global-warming-birds-1570816207.jpg"),
                              Image.network("https://www.straitstimes.com/sites/default/files/styles/article_pictrure_780x520_/public/articles/2020/02/20/nz_bustard_200259.jpg?itok=Vo5eW3Fs&timestamp=1582179579"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8sN97RzSkOEBZrmunFMvNPlF-cq2niG8yxw&usqp=CAU"),
                            ],
                          ),
                        ),
                        RaisedButton(
                          child: Text("Next"),
                          onPressed: (){
                            // Your navigator code
                          },
                          color: Colors.red,
                          textColor: Colors.yellow,
                          padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                          splashColor: Colors.grey,
                        ),
                      ],
                    )
于 2020-12-18T09:31:43.850 回答
1

在此处输入图像描述

使用bottomSheet道具：


class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
// you can use bottomSheet prop to add the Rasised button at the bottom: 
      bottomSheet: Container(
        width: double.infinity,
        child: RaisedButton(
          color: Colors.red,
          child: Text("Bottom Button"),
          onPressed: () {},
        ),
      ),
//--------------------------------------------------//
      appBar: AppBar(
        title: Text("Bird Species"),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: <Color>[
                Colors.yellowAccent,
于 2020-12-18T09:37:17.937 回答