Flutter Dart 布局、堆栈、定位如何在整个屏幕上拉伸 Material 按钮矩阵

Question

如何让 material 个按钮的矩阵在整个屏幕上伸展，如果我只使用高度，它们会根据屏幕尺寸伸展到很小或超出屏幕？

我可以轻松地在具有高度的矩阵中做到这一点：double.infinity 和 CrossAxisAlignment.stretch,.

尽管当我将 Stack 和 Positioned 小部件添加到组合中时，如果我使用高度 double.infinity，屏幕会变白。我得到错误：BoxConstraints 强制无限高。导致错误的相关小部件是： MaterialButton 文件:///Users/janiveble/AndroidStudioProjects/midi_app/lib/main.dart:113:14

虽然当我搜索这个错误时，我无法弄清楚它与我的问题有什么关系。

另外，如何将白键上的文本定位到键的底部而不是中心？

我还想得到白键的宽度，因为我想用它来控制基于它的黑键的位置和宽度。

  Expanded buildWhiteKey({Color color, int soundNumber}) {
    return Expanded(
      child: MaterialButton(
        //height: double.infinity,
        height: 100,
        color: color,
        textColor: Colors.red,
        padding: EdgeInsets.all(1.0),
        onPressed: () {
          //playSound(soundNumber);
          FlutterMidi.playMidiNote(midi: soundNumber);
          setState(() {
            userAnswer = soundNumber;
          });
        },
        child: Text('$soundNumber'),
      ),
    );
  }

  Expanded buildBlackKey({Color color, int soundNumber}) {
    return Expanded(
      child: MaterialButton(
        //height: double.infinity,
        height: 100,
        color: color,
        textColor: Colors.red,
        padding: EdgeInsets.all(1.0),
        onPressed: () {
          //playSound(soundNumber);
          FlutterMidi.playMidiNote(midi: soundNumber);
          setState(() {
            userAnswer = soundNumber;
          });
        },
        child: Text(
          '$soundNumber',
        ),
      ),
    );
  }

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white30,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                children: <Widget>[
                  quizKey(color: Colors.green),
                  checkAnswer(color: Colors.red),
                ],
              ),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 96),
                  buildWhiteKey(color: Colors.white, soundNumber: 98),
                  buildWhiteKey(color: Colors.white, soundNumber: 100),
                  buildWhiteKey(color: Colors.white, soundNumber: 101),
                  buildWhiteKey(color: Colors.white, soundNumber: 103),
                  buildWhiteKey(color: Colors.white, soundNumber: 105),
                  buildWhiteKey(color: Colors.white, soundNumber: 107),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 97),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 99),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 102),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 104),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 106),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 84),
                  buildWhiteKey(color: Colors.white, soundNumber: 86),
                  buildWhiteKey(color: Colors.white, soundNumber: 88),
                  buildWhiteKey(color: Colors.white, soundNumber: 89),
                  buildWhiteKey(color: Colors.white, soundNumber: 91),
                  buildWhiteKey(color: Colors.white, soundNumber: 93),
                  buildWhiteKey(color: Colors.white, soundNumber: 95),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 85),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 87),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 90),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 92),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 94),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 72),
                  buildWhiteKey(color: Colors.white, soundNumber: 74),
                  buildWhiteKey(color: Colors.white, soundNumber: 76),
                  buildWhiteKey(color: Colors.white, soundNumber: 77),
                  buildWhiteKey(color: Colors.white, soundNumber: 79),
                  buildWhiteKey(color: Colors.white, soundNumber: 81),
                  buildWhiteKey(color: Colors.white, soundNumber: 83),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 73),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 75),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 78),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 80),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 82),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 60),
                  buildWhiteKey(color: Colors.white, soundNumber: 62),
                  buildWhiteKey(color: Colors.white, soundNumber: 64),
                  buildWhiteKey(color: Colors.white, soundNumber: 65),
                  buildWhiteKey(color: Colors.white, soundNumber: 67),
                  buildWhiteKey(color: Colors.white, soundNumber: 69),
                  buildWhiteKey(color: Colors.white, soundNumber: 71),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 61),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 63),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 66),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 68),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 70),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 48),
                  buildWhiteKey(color: Colors.white, soundNumber: 50),
                  buildWhiteKey(color: Colors.white, soundNumber: 52),
                  buildWhiteKey(color: Colors.white, soundNumber: 53),
                  buildWhiteKey(color: Colors.white, soundNumber: 55),
                  buildWhiteKey(color: Colors.white, soundNumber: 57),
                  buildWhiteKey(color: Colors.white, soundNumber: 59),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 49),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 51),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 54),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 56),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 58),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 36),
                  buildWhiteKey(color: Colors.white, soundNumber: 38),
                  buildWhiteKey(color: Colors.white, soundNumber: 40),
                  buildWhiteKey(color: Colors.white, soundNumber: 41),
                  buildWhiteKey(color: Colors.white, soundNumber: 43),
                  buildWhiteKey(color: Colors.white, soundNumber: 45),
                  buildWhiteKey(color: Colors.white, soundNumber: 47),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 37),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 39),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 42),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 44),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 46),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(color: Colors.white, soundNumber: 24),
                  buildWhiteKey(color: Colors.white, soundNumber: 26),
                  buildWhiteKey(color: Colors.white, soundNumber: 28),
                  buildWhiteKey(color: Colors.white, soundNumber: 29),
                  buildWhiteKey(color: Colors.white, soundNumber: 31),
                  buildWhiteKey(color: Colors.white, soundNumber: 33),
                  buildWhiteKey(color: Colors.white, soundNumber: 35),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 25),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 27),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 30),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 32),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 34),
                          Container(width: keyWidth),
                        ])),
              ]),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

鉴于您使用的是全屏并且按钮数量固定，您可以使用以下方法获取屏幕高度和宽度：

MediaQuery.of(context).size.width //for screen width
MediaQuery.of(context).size.height //for screen height

然后根据它进行计算（例如，您有 7 x 7 按钮和一个 header，因此我们可以将它们算作 8 x 7，因此您可以将高度创建为 MediaQuery.of (context).size.height/8，宽度为MediaQuery.of(context).size.width/7

对于键内的文本对齐，您可以使用对齐小部件并放置对齐方式：alignment.bottomCenter 我修改了你的代码，我相信它应该能按预期工作（没有测试，因为我现在没有测试设备）。

我已将高度参数添加到您的白色按钮构建器并将其传递给构建小部件，我用对齐小部件包裹了您的文本小部件以将文本定位在底部，并为屏幕宽度和高度创建了一个变量。下面是修改后的代码。

    Expanded buildWhiteKey({double height,Color color, int soundNumber}) {
    return Expanded(
      child: MaterialButton(
        //height: double.infinity,
        height: height,
        color: color,
        textColor: Colors.red,
        padding: EdgeInsets.all(1.0),
        onPressed: () {
          //playSound(soundNumber);
          FlutterMidi.playMidiNote(midi: soundNumber);
          setState(() {
            userAnswer = soundNumber;
          });
        },
        child: Align(
          alignment: Alignment.bottomCenter,
          child:Text('$soundNumber')),
      ),
    );
  }

  Expanded buildBlackKey({Color color, int soundNumber}) {
    return Expanded(
      child: MaterialButton(
        //height: double.infinity,
        height: 100,
        color: color,
        textColor: Colors.red,
        padding: EdgeInsets.all(1.0),
        onPressed: () {
          //playSound(soundNumber);
          FlutterMidi.playMidiNote(midi: soundNumber);
          setState(() {
            userAnswer = soundNumber;
          });
        },
        child: Text(
          '$soundNumber',
        ),
      ),
    );
  }

@override
  Widget build(BuildContext context) {
    var screenHeight = MediaQuery.of(context).size.height;
    var whiteKeyWidth = MediaQuery.of(context).size.width/7; //this is the width of white key
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white30,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                height: screenHeight/8,
                child:Row(
                children: <Widget>[
                  quizKey(color: Colors.green),
                  checkAnswer(color: Colors.red),
                ],
              )),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 96),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 98),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 100),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 101),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 103),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 105),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 107),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 97),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 99),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 102),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 104),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 106),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 84),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 86),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 88),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 89),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 91),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 93),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 95),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 85),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 87),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 90),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 92),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 94),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 72),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 74),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 76),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 77),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 79),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 81),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 83),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 73),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 75),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 78),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 80),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 82),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 60),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 62),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 64),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 65),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 67),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 69),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 71),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 61),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 63),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 66),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 68),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 70),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 48),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 50),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 52),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 53),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 55),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 57),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 59),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 49),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 51),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 54),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 56),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 58),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 36),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 38),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 40),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 41),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 43),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 45),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 47),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 37),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 39),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 42),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 44),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 46),
                          Container(width: keyWidth),
                        ])),
              ]),
              Stack(children: <Widget>[
                Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 24),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 26),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 28),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 29),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 31),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 33),
                  buildWhiteKey(height: screenHeight/8,color: Colors.white, soundNumber: 35),
                ]),
                Positioned(
                    left: 0.0,
                    right: 0.0,
                    bottom: 50.0,
                    top: 0.0,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(width: keyWidth),
                          buildBlackKey(color: Colors.black, soundNumber: 25),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 27),
                          Container(width: keyWidth2),
                          buildBlackKey(color: Colors.black, soundNumber: 30),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 32),
                          Container(width: keyWidth1),
                          buildBlackKey(color: Colors.black, soundNumber: 34),
                          Container(width: keyWidth),
                        ])),
              ]),
            ],
          ),
        ),
      ),

Answer 2

我解决了问题

为了正确安排按钮，我不得不将 Stack 和 Positioned 小部件包装在一个 Expanded 小部件中的适当位置

 @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Row(
            children: <Widget>[
              quizKey(color: Colors.green),
              checkAnswer(color: Colors.red),
            ],
          ),
          Expanded(
            child: Stack(children: <Widget>[
              Row(children: <Widget>[
                buildWhiteKey(color: Colors.white, soundNumber: 96),
                buildWhiteKey(color: Colors.white, soundNumber: 98),
                buildWhiteKey(color: Colors.white, soundNumber: 100),
                buildWhiteKey(color: Colors.white, soundNumber: 101),
                buildWhiteKey(color: Colors.white, soundNumber: 103),
                buildWhiteKey(color: Colors.white, soundNumber: 105),
                buildWhiteKey(color: Colors.white, soundNumber: 107),
              ]),
              Positioned(
                  left: 0.0,
                  right: 0.0,
                  bottom: kbottomHeight,
                  top: 0.0,
                  child: Row(children: <Widget>[
                    Container(width: kkeyWidth),
                    buildBlackKey(color: Colors.black, soundNumber: 97),
                    Container(width: kkeyWidth * 0.5),
                    buildBlackKey(color: Colors.black, soundNumber: 99),
                    Container(width: kkeyWidth * 2),
                    buildBlackKey(color: Colors.black, soundNumber: 102),
                    Container(width: kkeyWidth * 0.5),
                    buildBlackKey(color: Colors.black, soundNumber: 104),
                    Container(width: kkeyWidth * 0.5),
                    buildBlackKey(color: Colors.black, soundNumber: 106),
                    Container(width: kkeyWidth),
                  ])),
            ]),
          ),
         
          ],
        ),
      );
  }

为了正确对齐按钮小部件中的文本，我使用了 InkWell 按钮小部件，然后它工作正常。

  Expanded buildWhiteKey({Color color, int soundNumber}) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(1.0),
        child: InkWell(
          onTap: () {
            //playSound(soundNumber);
          },
          child: Container(
            //height: double.infinity,
            color: color,
            padding: EdgeInsets.all(1.0),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Text(
                '$soundNumber',
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ),
      ),
    );
  }

关于如何获得白键的宽度，我还不太确定它是如何工作的，但已经变通了，在那里我找到了如何用一个常数控制它并根据黑键的位置除法或乘法关键。

感谢 Ammar 付出的时间和努力，尽管你的代码对我来说并没有真正奏效（我猜你无法真正测试它，因为你手边没有机器），尽管你的建议很有帮助我的工作也是如此。

Flutter Dart 布局、堆栈、定位如何在整个屏幕上拉伸 Material 按钮矩阵

Flutter Dart layouts, Stack, Positioned how to stretch matrix of Material Buttons over whole screen

stack

button

dart

flutter

flutter-positioned