在 flutter 网页的中心对齐多个按钮

Question

我试图将页面的底部部分居中对齐，这在移动设备上显示正确，但在网络上看起来不正确。如何在页面中央排列所有 4 个音乐按钮和文本。我试过 Align friand center 但都没有把它们带到小部件的中心。我的目标是根据页面大小在页面中央放置一个按钮，如果页面较小，下面的代码很好，但是当我最大化浏览器时，它不会显示在中央。

Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  // child: Expanded(child: slider()),
                  child: kIsWeb ? null : slider(),
                ),
                Marquee(
                  child: Text(inuseAudioinfo.title ?? appname,
                      softWrap: true,
                      style: TextStyle(
                        // color: AppColors.black.withAlpha(90),
                        color: AppColors.black.withAlpha(150),
                        fontSize: 16,
                      )),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                    top: BorderSide(color: Colors.red[300]),
                    // bottom: BorderSide(color: AppColors.white)
                  )),
                  child: Wrap(
                    spacing: kIsWeb
                        ? MediaQuery.of(context).size.width * 0.1
                        : 25, // space between two icons
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          inuseAudioinfo.isRepeat
                              ? Icons.repeat_one
                              : Icons.repeat,
                          color: inuseAudioinfo.isRepeat
                              ? AppColors.brown
                              : AppColors.black,
                        ),
                        onPressed: () {
                          print("User clicked Repeat one.");
                          if (inuseAudioinfo.playId != null) {
                            Duration seekdur = new Duration(seconds: 10);
                            if (inuseAudioinfo.isRepeat) {
                              setState(() {
                                inuseAudioinfo.isRepeat = false;
                              });
                            } else {
                              setState(() {
                                inuseAudioinfo.isRepeat = true;
                              });
                            }
                          } else {
                            commonmethod.displayDialog(
                              context,
                              "",
                              "Please select song to play.",
                              Icon(
                                Icons.library_music,
                                size: 100,
                                color: AppColors.red200,
                              ),
                            );
                          }
                        },
                      ),
                      IconButton(
                          icon: Icon(
                            inuseAudioinfo.isPlaying
                                ? Icons.pause
                                : Icons.play_arrow,
                            color: AppColors.black,
                          ),
                          onPressed: () {
                            _player(_songId);
                          }),
                      IconButton(
                          icon: Icon(
                            Icons.stop,
                            color: AppColors.black,
                          ),
                          onPressed: () {
                            if (inuseAudioinfo.isPlaying) {
                              // _inuseAudioinfo.audioPlayer.stop();
                              inuseAudioinfo.duration =
                                  new Duration(seconds: 0);
                              inuseAudioinfo.audioPlayer.stop();
                              setState(() {
                                inuseAudioinfo.isPlaying = false;
                                // position = new Duration(seconds: 0);
                                // _duration = new Duration();
                              });
                            }

                            // isPlaying = false;
                          }),
                      IconButton(
                          icon: Icon(
                            Icons.shuffle,
                            color: inuseAudioinfo.isShuffle
                                ? AppColors.brown
                                : AppColors.black,
                          ),
                          onPressed: () {
                            if (inuseAudioinfo.isShuffle) {
                              setState(() {
                                inuseAudioinfo.isShuffle = false;
                              });
                            } else {
                              setState(() {
                                inuseAudioinfo.isShuffle = true;
                              });
                            }
                          }),
                    ],
                  ),
                ),
                // ),
                // ),
              ],
            )

Answer 1

删除 Wrap() 并使用 Row(mainAxisAlignment: MainAxisAlignment.center,)