如何在网格视图下方添加“凸起按钮”？

Posted 2023-02-23

【中文标题】如何在网格视图下方添加“凸起按钮”？

【英文标题】：How to add 'Raised button' just below the gridview?

【发布时间】：2021-03-28 22:51:59

【问题描述】：

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

link of the code

【参考方案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,
                        ),
                      ],
                    )

【讨论】：

@VasavChaturvedi，如果这对您有用，请将其标记为该问题的正确答案 :)

非常感谢，你能告诉我在 Flutter sdk 中我必须为应届生准备哪些面试问题吗？

【参考方案2】：

使用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,