堆栈中的空白是什么以及如何修复它

Question

有人可以解释为什么这个堆栈小部件的顶部和底部有空白，尽管这里没有填充？ 我有一堆进度条和音乐详细信息。虽然我没有添加任何填充，但为什么我的小部件中有空格？有没有什么办法解决这一问题。 我的代码：mini_player.dart

import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:webtoon/miniplayer/widgets/progress_bar.dart';

import '../riverpod/song_provider.dart';
import 'widgets/control_button.dart';

class MiniPlayer extends ConsumerWidget {
  const MiniPlayer({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final audioPlayer = ref.watch(audioHandlerProvider);

    return GestureDetector(
      child: Align(
        alignment: const AlignmentDirectional(0, 1),
        child: Container(
          color: Theme.of(context).scaffoldBackgroundColor,
          height: 80,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.bottomLeft,
                child: Row(
                  children: <Widget>[
                    Image.asset('assets/artwork.jpg',
                        width: 60, height: 60, fit: BoxFit.cover),
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        children: <Widget>[
                          Text(
                            'The Weeknd',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Theme.of(context).primaryColor,
                                fontSize: 18),
                          ),
                          Text(
                            'Blinding Lights',
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Theme.of(context).secondaryHeaderColor,
                                fontSize: 13),
                          ),
                        ],
                      ),
                    ),
                    const Spacer(),
                    Control(
                      audioPlayer: audioPlayer,
                      size: 20.0,
                    )
                  ],
                ),
              ),
              StreamBuilder<PositionData>(
                  stream: PositionData.positionDataStream(audioPlayer),
                  builder: (context, snapshot) {
                    final positionData = snapshot.data;

                    return ProgressBar(
                      barHeight: 5,
                      baseBarColor: Colors.black,
                      bufferedBarColor: Theme.of(context).secondaryHeaderColor,
                      progressBarColor: Theme.of(context).primaryColor,
                      thumbColor: Theme.of(context).primaryColor,
                      timeLabelTextStyle: TextStyle(
                        color: Theme.of(context).primaryColor,
                        fontSize: 0,
                      ),
                      progress: positionData?.position ?? Duration.zero,
                      buffered: positionData?.bufferedPosition ?? Duration.zero,
                      total: positionData?.duration ?? Duration.zero,
                      onSeek: audioPlayer.seek,
                    );
                  }),
            ],
          ),
        ),
      ),
      onTap: () => Navigator.of(context).pushNamed('/play'),
    );
  }
}

我考虑过将容器高度从 80 更改为 60 以匹配图像高度，空格确实消失了，但我却像这样溢出了 怎么解决这个问题T_T，非常感谢。

Answer 1

您可以使用 Flutter 的 Widget Inspector 工具来帮助查找布局中的问题。

第1步：
单击“运行”按钮，直接在 IDE 中运行您的应用程序。

第2步：
在出现的“运行”工具栏上，单击“小部件检查器”图标。

第三步：
单击检查器窗口右上角的“切换选择小部件模式”。

第四步：
点击您想要在模拟器或设备上检查的小部件。

第五步：
小部件检查器将跳转到源代码。检查代码和小部件树，查找是否有任何额外的填充或边距。