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

Question

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

需要的结果图像

当前代码

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

Answer 1

我认为这仅通过使用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),
      ),
    );
  }
}