[译] 用 Flutter 打造一个圆形滑块（Slider）

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  double _sliderValue = 0.0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SliderTheme(
          data: SliderTheme.of(context).copyWith(
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
            trackHeight: 1.0,
            activeTrackColor: Colors.deepPurpleAccent,
            inactiveTrackColor: Colors.deepPurple,
            thumbColor: Colors.white,
            overlayColor: Colors.deepPurpleAccent.shadeAlpha,
          ),
          child: Slider(
            value: _sliderValue,
            min: 0.0,
            max: 100.0,
            onChanged: (double value) {
              setState(() {
                _sliderValue = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

这段代码使用了Flutter的Slider控件来创建一个圆形滑块，通过SliderTheme来自定义滑块的外观，包括滑块的形状、轨道的高度和颜色。滑块的圆形按钮使用RoundSliderThumbShape自定义，圆形覆盖层使用RoundSliderOverlayShape自定义。滑块的值通过_sliderValue来跟踪，并在滑动时更新。