Flutter按钮位于GridViewBuilder下方
我想在 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;
}
回答
我已经稍微修改了你的代码。请看一看。
将列包裹在 a 中SingleChildScrollView,删除Expanded小部件并添加shrinkWrap: true到里面GridView
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: (){},
),
),
],
),
),
),
));