是否将按钮的高度和宽度设置为硬编码？

Question

我正在尝试改善木琴应用程序的用户界面。因此，首先，所有按钮都在垂直方向上展开，在水平方向上伸展。但是现在我希望按钮的大小不同，并且它们的大小必须按降序更改。它是这样的：

但是我觉得我做错了！这被认为是硬编码吗？

  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);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

您可以使用flutter_screenutil包或将测量值设置为设备屏幕尺寸的宽度/高度的百分比，如下所示：

  @override
  Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;


return Column(children:[
              SizedBox(height: 0.05*height,),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(
                    left: 0.1*width,
                    right: 0.1*width,
                  ),]
                  );
                }

Answer 2

我建议您将属性存储在列表中，然后在此列表上进行迭代以动态创建子代。这也将允许您基于当前索引设置大小（这也是您要播放的声音的ID）。

这将把您的数据与创建子代的代码分开，并且应该易于更改。