Flutter Row内元素对齐 动态文本导致进度条宽度变化怎么固定布局？

问题描述 #

想要实现固定结构的视频控制栏布局：

但由于播放时间、缓冲时间文本是动态变化的，文本宽度会随之改变，最终布局会出现错乱：


已经用Flexible包裹了进度条，但因为进度条本身没有固定宽高，无法设置固定宽度，文本内容变化时进度条占用空间会随之增减，导致布局异常。

现有代码片段 #

child: Row(
  children: [
    GestureDetector(
        child: Icon(
      
        ),
        onTap: () {
        }),
    Padding(
      padding: EdgeInsets.only(left: 2),
      child: Container(
        color: Colors.red,
        child: ValueListenableBuilder(
          valueListenable: _videoController,
          builder: (context, VideoPlayerValue value, child) {
            .....
          
            return Text(
              videoControllerPosition,
            );
          },
        ),
      ),
    ),
    Flexible(
      child: Container(
        color: Colors.blue,
        child: SizedBox(
          child: ValueListenableBuilder(
              valueListenable: _videoController,
              builder:
                  (context, VideoPlayerValue value, child) {
                return ProgressBar(
                  ....

                );
              }),
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(left: 2),
      child: ValueListenableBuilder(
        valueListenable: _videoController,
        builder: (context, VideoPlayerValue value, child) {

         ......
          return Text(
            bufferedTime,
          );
        },
      ),
    ),
  ],
),

解决方案 #

核心思路是固定两侧时间文本的宽度，避免动态变化的文本宽度挤压进度条空间，具体调整如下：

1. 给左右两侧的时间Text组件外层嵌套固定宽度的SizedBox，宽度设置为能容纳最长时间文本的数值即可，比如最长时间为100:00:00的话，宽度可以设置为60-70的适配值。
2. 将包裹进度条的Flexible替换为Expanded，Expanded会强制进度条占用Row的剩余全部空间，不会因为两侧宽度变化而被挤压。

调整后的核心代码示例：

child: Row(
  children: [
    GestureDetector(
        child: Icon(
      
        ),
        onTap: () {
        }),
    Padding(
      padding: EdgeInsets.only(left: 2),
      // 新增固定宽度的SizedBox包裹当前播放时间组件
      child: SizedBox(
        width: 50, // 可根据最长时间文本调整数值
        child: Container(
          color: Colors.red,
          child: ValueListenableBuilder(
            valueListenable: _videoController,
            builder: (context, VideoPlayerValue value, child) {
              .....
              // 给Text设置对齐方式，保证布局美观
              return Text(
                videoControllerPosition,
                textAlign: TextAlign.end,
              );
            },
          ),
        ),
      ),
    ),
    // 替换Flexible为Expanded，强制占用剩余全部空间
    Expanded(
      child: Container(
        color: Colors.blue,
        child: ValueListenableBuilder(
            valueListenable: _videoController,
            builder:
                (context, VideoPlayerValue value, child) {
              return ProgressBar(
                ....
              );
            }),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(left: 2),
      // 新增固定宽度的SizedBox包裹缓冲时间/总时间组件
      child: SizedBox(
        width: 50, // 可根据最长时间文本调整数值
        child: ValueListenableBuilder(
          valueListenable: _videoController,
          builder: (context, VideoPlayerValue value, child) {
           ......
            return Text(
              bufferedTime,
              textAlign: TextAlign.start,
            );
          },
        ),
      ),
    ),
  ],
),

如果担心固定宽度在不同设备上适配不好，也可以用FittedBox包裹时间Text组件，让文本自动缩放适配固定宽度，避免文本溢出。

内容的提问来源于stack exchange，提问作者bsgal