You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何消除或最小化两行之间的垂直间距?

Flutter 音频播放器快进/快退按钮布局示例

以下是一段基础Flutter代码,实现了音频播放器中的快进/快退按钮组布局:上方是四个不同尺寸的快退、快进IconButton,下方是对应每个按钮的时间文本说明。

import 'package:flutter/material.dart';

class AudioPlayerScreen extends StatelessWidget {
  final String audioUrl;

  AudioPlayerScreen({required this.audioUrl});

  final double _audioIconSizeSmaller = 50;

  final double _audioIconSizeMedium = 60;

  final double _audioIconSizeLarge = 90;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('音频播放器'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          _buildPositionButtons(),
        ],
      ),
    );
  }

  Widget _buildPositionButtons() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: IconButton(
                iconSize: _audioIconSizeMedium,
                onPressed: () => print(''),
                icon: const Icon(Icons.fast_rewind),
              ),
            ),
            Expanded(
              child: IconButton(
                iconSize: _audioIconSizeSmaller,
                onPressed: () => print(''),
                icon: const Icon(Icons.fast_rewind),
              ),
            ),
            Expanded(
              child: IconButton(
                iconSize: _audioIconSizeSmaller,
                onPressed: () => print(''),
                icon: const Icon(Icons.fast_forward),
              ),
            ),
            Expanded(
              child: IconButton(
                iconSize: _audioIconSizeMedium,
                onPressed: () => print(''),
                icon: const Icon(Icons.fast_forward),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Expanded(
              child: Text(
                '1 分钟',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20.0),
              ),
            ),
            Expanded(
              child: Text(
                '10 秒',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18.0),
              ),
            ),
            Expanded(
              child: Text(
                '10 秒',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18.0),
              ),
            ),
            Expanded(
              child: Text(
                '1 分钟',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20.0),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: AudioPlayerScreen(
      audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
    ),
  ));
}

运行效果

运行效果截图

内容的提问来源于stack exchange,提问作者Jean-Pierre Schnyder

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 20:22:43