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
相关产品推荐
相关产品推荐

