flutter---进度条（3）

效果图

垂直音量进度条

1.定义变量

Dart 复制代码

double _sliderValue9 = 0.65;

2.构造垂直音量条

Dart 复制代码

Widget _buildVerticalSliderCard({
    required String title, //卡片标题
    required double value, //当前值
    required ValueChanged<double> onChanged, //值变化回调
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.white.withOpacity(0.1)),
      ),
      child: Column(
        children: [

          //标题
          Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              //垂直滑块区域
              SizedBox(
                height: 200, //固定宽高
                width: 60,
                child: RotatedBox( //旋转盒子（关键）
                  quarterTurns: 3, //旋转270度
                  //进度条核心
                  child: SliderTheme(
                    data: SliderThemeData(
                      trackHeight: 12, //轨道高度
                      thumbShape: const RoundSliderThumbShape(
                        enabledThumbRadius: 10, //滑块半径
                      ),
                      activeTrackColor: const Color(0xFF1E40AF), //激活颜色
                      inactiveTrackColor: Colors.white.withOpacity(0.1),//未激活颜色
                      thumbColor: Colors.white,
                    ),
                    child: Slider(
                      value: value,
                      onChanged: onChanged,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 20),
              //可视化进度容器
              Column(
                children: [
                  Container(
                    width: 80,
                    height: 180,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: Colors.white.withOpacity(0.2)),
                    ),
                    child: Stack(
                      children: [
                        // 背景
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.white.withOpacity(0.05),
                          ),
                        ),
                        // 填充
                        Positioned(
                          bottom: 0,
                          child: AnimatedContainer(
                            duration: const Duration(milliseconds: 300),
                            width: 80,
                            height: 180 * value, //动态高度：总高度x进度值
                            decoration: BoxDecoration(
                              borderRadius: const BorderRadius.only(
                                bottomLeft: Radius.circular(8),
                                bottomRight: Radius.circular(8),
                              ),
                              gradient: LinearGradient(
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                                colors: [
                                  const Color(0xFF1E40AF),
                                  const Color(0xFF3B82F6),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    '${(value * 100).toInt()}%',
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }

3.使用垂直音量条

Dart 复制代码

         _buildVerticalSliderCard(
            title: '垂直音量条',
            value: _sliderValue9,
            onChanged: (value) => setState(() => _sliderValue9 = value),
          ),