Flutter - 如何在 Slider 小部件的轨道内添加小部件

如何解决Flutter - 如何在 Slider 小部件的轨道内添加小部件

我有一个简单的 Slider 小部件，我想在轨道内的不同点添加多个容器。

需要的结果图像

Slider(
  max: 500,value: _playerValue,onChanged: (double value){
    setState(() {
      _playerValue = value;
    });
  },),

解决方法

我认为仅使用 SliderThemeData 是不可能的；或者至少，我不知道有什么办法。但是，您可以使用 Stack 实现此行为，标记显示在滑块的半透明轨道后面。下面的演示片段。

需要注意的一点是确保具有标记堆栈的容器的水平边距与滑块的覆盖半径相同；否则，标记容器将变得比轨道宽。

重要提示：我快速地将这个片段放在一起只是为了演示在滑块轨道后面显示标记的可能性。轨道和标记的尺寸是硬编码的，这很可能不是您想要的。我不建议按原样使用它，而仅作为指南使用。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,title: 'Slider with Markers',theme: ThemeData(
        primarySwatch: Colors.blue,brightness: Brightness.dark,),home: Home(),);
  }
}

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double sliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,title: Text("Slider With Markers"),body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
            SliderTheme(
              data: SliderTheme.of(context).copyWith(
                activeTrackColor: Colors.white60,inactiveTrackColor: Colors.white30,thumbColor: Colors.white,thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),overlayShape: RoundSliderOverlayShape(overlayRadius: 12),trackHeight: 12,child: Stack(
                alignment: Alignment.center,children: [
                  Container(
                    width: double.infinity,margin: const EdgeInsets.symmetric(horizontal: 12),child: Stack(
                      alignment: Alignment.centerLeft,children: <Widget>[
                        marker(left: 15,width: 30),marker(left: 150,width: 50),marker(left: 300,width: 100),],Slider(
                    value: sliderValue,min: 0,max: 100,onChanged: ((value) {
                      setState(() {
                        sliderValue = value;
                      });
                    }),)
          ],);
  }

  Widget marker({required double left,required double width}) {
    return Container(
      height: 12,width: width,margin: EdgeInsets.only(left: left),decoration: BoxDecoration(
        color: Colors.amber,borderRadius: BorderRadius.circular(18),);
  }
}