将图标在一行中垂直居中对齐：Flutter

Question

我正在开发一个在向上滚动时隐藏的底部导航栏，但我无法达到预期的效果。我有 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
                    },
                  )
                ],
              ),
            )
          ],
        ),
      )),

如何在较小的空间中正确对齐图标？

Answer 1

要减少文本和滑块之间的空间，您需要为其提供自定义形状。因此，为此创建一个如下所示的形状：-

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，要么更改填充代码。