我正在尝试改进我的 Xylophone 应用程序的 UI。所以一开始,所有的按钮都是垂直展开并水平拉伸的。但是现在我想要不同大小的按钮,它们的大小必须按降序变化。这是它的样子:
但是我觉得我做的不对!这被认为是硬编码吗?
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: FlatButton(
child: Text(
'A',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.red,
onPressed: () {
playSound(1);
},
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 8.0,
right: 8.0,
),
child: FlatButton(
child: Text(
'B',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.orange,
onPressed: () {
playSound(2);
},
),
),
),
SizedBox(height: 5.0,),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 16.0,
right: 16.0,
),
child: FlatButton(
child: Text(
'C',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.yellow,
onPressed: () {
playSound(3);
},
),
),
),
SizedBox(height: 5.0,),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 24.0,
right: 24.0,
),
child: FlatButton(
child: Text(
'D',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.green,
onPressed: () {
playSound(4);
},
),
),
),
SizedBox(
height: 10,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 32,
right: 32,
),
child: FlatButton(
child: Text(
'E',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.teal,
onPressed: () {
playSound(5);
},
),
),
),
SizedBox(
height: 7.0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 40.0,
right: 40.0,
),
child: FlatButton(
child: Text(
'F',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.blue,
onPressed: () {
playSound(6);
},
),
),
),
SizedBox(
height: 10,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 48.0,
right: 48.0,
),
child: FlatButton(
child: Text(
'G',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.purple,
onPressed: () {
playSound(7);
},
),
),
),
],
),
),
),
);
}