1

我正在尝试改进我的 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);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
4

2 回答 2

0

您可以使用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,
                  ),]
                  );
                }
于 2020-06-17T09:41:17.163 回答
0

我建议您将属性存储在一个列表中，然后遍历该列表以动态创建子级。这也将允许您根据当前索引设置大小（这也是您要播放的声音的 id）。

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

于 2020-06-17T10:12:16.630 回答