Flutter 按钮放置在 GridView Builder 下方

Question

我想在 Gridview 下方有一个大而长的按钮，就像 Roblox 应用程序中的注销按钮一样

我设法使用 Column 创建了一个 gridview 和按钮，但是按钮漂浮在 gridview 上方，如何使其很好地放置在 gridview 下方而不漂浮在 gridview 上方？

这是我的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Grid List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: MainMenuBody(),
      ),
    );
  }
}

class MainMenuBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final List<MenuData> menu = [
      MenuData(Icons.move_to_inbox_outlined, 'Menu 1'),
      MenuData(Icons.find_in_page_outlined, 'Menu 2'),
      MenuData(Icons.find_in_page_outlined, 'Menu 3'),
      MenuData(Icons.upgrade_outlined, 'Menu 4'),
      MenuData(Icons.upgrade_outlined, 'Menu 5'),
      MenuData(Icons.play_for_work_outlined, 'Menu 6'),
      MenuData(Icons.play_for_work_outlined, 'Menu 7'),
      MenuData(Icons.assignment_turned_in_outlined, 'Menu 8'),
      MenuData(Icons.assignment_turned_in_outlined, 'Menu 9'),
      MenuData(Icons.fact_check_outlined, 'Menu 10')
    ];

    return Container(
    child: Scrollbar(
  thickness: 3,
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 10.0),
    child: SingleChildScrollView(
      child: Column(
        children: [
          GridView.builder(
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            itemCount: menu.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 1,
                crossAxisCount: 2,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0),
            itemBuilder: (BuildContext context, int index) {
              return Card(
                elevation: 0.2,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.0)),
                child: InkWell(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        menu[index].icon,
                        size: 30,
                      ),
                      SizedBox(height: 20),
                      Text(
                        menu[index].title,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 10,
                            color: Colors.black87),
                      )
                    ],
                  ),
                ),
              );
            },
          ),
          Center(
            child: RaisedButton(
              child: Text("Button"),
              onPressed: (){},
            ),
          ),
        ],
      ),
    ),
  ),
));
  }
}

class MenuData {
  MenuData(this.icon, this.title);
  final IconData icon;
  final String title;
}

Answer 1

更新：不确定这是否通常是要走的路，但您可以创建一个滚动视图来包装列，包装 gridview 和按钮。在网格视图中，您必须使用 physics: new NeverScrollableScrollPhysics().

禁用滚动

但也许列和行是解决此问题的方法

Answer 2

我已经稍微修改了你的代码。请看一下。

将列包装在 SingleChildScrollView 内，删除 Expanded 小部件并在 GridView

内添加 shrinkWrap: true

return Container(
    child: Scrollbar(
  thickness: 3,
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 10.0),
    child: SingleChildScrollView(
      physics: BouncingScrollPhysics(),
      child: Column(
        children: [
          GridView.builder(
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            itemCount: menu.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: 1,
                crossAxisCount: 2,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0),
            itemBuilder: (BuildContext context, int index) {
              return Card(
                elevation: 0.2,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.0)),
                child: InkWell(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        menu[index].icon,
                        size: 30,
                      ),
                      SizedBox(height: 20),
                      Text(
                        menu[index].title,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 10,
                            color: Colors.black87),
                      )
                    ],
                  ),
                ),
              );
            },
          ),
          Center(
            child: RaisedButton(
              child: Text("Button"),
              onPressed: (){},
            ),
          ),
        ],
      ),
    ),
  ),
));

Flutter 按钮放置在 GridView Builder 下方

Flutter Button Placed below GridView Builder

gridview

flutter