flutter - 将图标在一行中垂直居中对齐:Flutter
问题描述
我正在开发一个在向上滚动时隐藏的底部导航栏,但我无法达到预期的效果。我有 2 个带有不同小部件的容器来分别处理。在第一个容器中,有 2 个带有滑块的文本小部件,第二个容器有 5 个图标按钮。我想减少文本和滑块之间的空间,并将 play_button 对齐在垂直 centerzz 中。我想做的是这样的:
我开发了什么:
这是我的代码:
bottomNavigationBar: ValueListenableBuilder(
valueListenable: hiding.visible,
builder: (context, bool value, child) => AnimatedContainer(
color: light_mode? Color(0xFFFFFFFF) : Color(0xFF616161),
duration: Duration(milliseconds: 500),
height: value ? 100 : 0.0,
child: Wrap(
runAlignment: WrapAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(5, 1, 5, 1),
padding: EdgeInsets.all(5),
height: 30,
width: MediaQuery.of(context).size.width,
child: Row(
children: <Widget>[
Text("0:00", style: TextStyle(color: Colors.black), textAlign: TextAlign.left),
Container(
margin: EdgeInsets.all(2),
height: 30,
width: MediaQuery.of(context).size.width-80,
child:SliderTheme(
data: SliderThemeData(
thumbColor: light_mode? Color(0xFF6A0080) : Colors.black,
activeTrackColor: light_mode?Color(0xFF6A0080) : Colors.black,
inactiveTrackColor: Colors.grey,
trackHeight: 1.0,
),
child: Slider(
value: 60.0,
max: 100.0,
min: 0.0,
onChanged: (double newValue) {
setState(() {
// sliderValue = newValue.round();
});
},
))),
Text("0:00", style: TextStyle(color: Colors.black), textAlign: TextAlign.right)
],
),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(20, 1, 20, 16),
padding: EdgeInsets.all(8.0),
height: 50,
width: MediaQuery.of(context).size.width,
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
IconButton(
alignment: Alignment.center,
icon: Icon(
Icons.skip_previous,
color: Colors.grey,
size: 30,
),
onPressed: () {
// do something
},
),
IconButton(
padding: EdgeInsets.all(8.0),
icon: Icon(
Icons.play_circle_fill_rounded,
color: light_mode? Color(0xFFEA80FC) : Color(0xFF6D6D6D) ,
size: 45,
),
onPressed: () {
// do something
},
)
,
IconButton(
icon: Icon(
Icons.skip_next,
color: Colors.grey,
size: 30,
),
onPressed: () {
// do something
},
)
,
IconButton(
icon: Icon(
Icons.bookmark_border_outlined,
color: Colors.grey,
size: 35.0,
),
onPressed: () {
// do something
},
)
,
IconButton(
icon: Icon(
Icons.share_rounded,
color: Colors.grey,
),
onPressed: () {
// do something
},
)
],
),
)
],
),
)),
如何在较小的空间中正确对齐图标?
解决方案
要减少文本和滑块之间的空间,您需要为其提供自定义形状。因此,为此创建一个如下所示的形状:-
class CustomTrackShape extends RoundedRectSliderTrackShape {
Rect getPreferredRect({
@required RenderBox parentBox,
Offset offset = Offset.zero,
@required SliderThemeData sliderTheme,
bool isEnabled = false,
bool isDiscrete = false,
}) {
final double trackHeight = sliderTheme.trackHeight;
final double trackLeft = offset.dx;
final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
final double trackWidth = parentBox.size.width;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}
}
然后在您的滑块主题中:-
SliderTheme(
data: SliderThemeData(
thumbColor: light_mode? Color(0xFF6A0080) : Colors.black,
activeTrackColor: light_mode?Color(0xFF6A0080) : Colors.black,
inactiveTrackColor: Colors.grey,
trackHeight: 1.0,
trackShape: CustomTrackShape(),//call your custom shape over here
),
child: Slider(
value: 60.0,
max: 100.0,
min: 0.0,
onChanged: (double newValue) {
setState(() {
// sliderValue = newValue.round();
});
},
)),
并且为了正确对齐容器,请从包含这些图标的容器顶部和底部移除填充,即将填充从 更改padding:EdgeInsets.all(8.0)
为padding:EdgeInsets.symmetric(horizontal:8.0)
,因为容器的大小为 50 且图标为 45 并且您提供 10 像素的填充(从顶部开始为 5和 5 从底部)这意味着容器高度应为 55。因此,要么将高度增加到 60,要么更改填充代码。
推荐阅读
- python - Windows 10 操作系统上的标准 Python 模块在哪里?
- django - 导出 Django 表2
- reactjs - 如何在 React Js 中仅上传 PDF 文件和预览
- bash - 如何使用 shell 脚本将文件从 Amazon s3 移动到 sftp
- emacs - emacs/evil-mode:如何使 Ci 在 c-mode 激活时作为“evil-jump-forward”工作,并在 org-mode avtivated 时作为“org-cycle”工作
- ruby-on-rails - Heroku 未检测到 Ruby 版本
- php - 如何使用数据库中的列进行计算并插入结果 Codeigniter
- c# - 按年分组,然后按月分组,有自己的收藏
- docker - 如何通过 url 而不是正在运行的容器内的 ip 地址访问服务器
- ios - 如何使用 Codable 解析这个 JSON?