我正在编写一个儿童游戏。设计包括标题,子标题,游戏板,图标,然后包括复位按钮。但是,当我添加图标时,它们与游戏板重叠。有人可以帮我吗?
我所拥有的:
我要构建的东西:
我得到的是
这是我的构建函数:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Cat Attack"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// Headline
Material(
child: Text(
statusTextHeadline,
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
color: Colors.red,
),
// Sub headline
Material(
child: Text(
statusTextSub,
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
color: Colors.red,
),
// Game board
Expanded(
child: GridView.builder(
padding: const EdgeInsets.all(10.0),
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, // 4 columns of board buttons
childAspectRatio: 1.0,
crossAxisSpacing: 9.0,
mainAxisSpacing: 9.0),
// Game board loop
itemCount: buttonsList.length,
itemBuilder: (context, i) => SizedBox(
width: 100.0,
height: 100.0,
child: Material(
elevation: 4.0,
color: Colors.grey, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
child: InkWell(
splashColor: Colors.black, // give any splashColor you want
onTap: () => playGame(buttonsList[i]),
child: Image.asset(buttonsList[i].icon),
),
),
),
),
),
// Icons
Material(
color: Colors.grey, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
child: InkWell(
splashColor: Colors.black, // give any splashColor you want
onTap: () => showCage(),
child: Image.asset("assets/icons/outline_pets_black_24dp.png"),
),
),
// Reset
RaisedButton(
child: new Text(
"Reset",
style: new TextStyle(color: Colors.white, fontSize: 20.0),
),
color: Colors.red,
padding: const EdgeInsets.all(20.0),
onPressed: resetGame,
)
],
));
}
有人可以帮助我吗?