flutter 如何使滑块随特定分区摆动

w9apscun  于 2023-06-30  发布在  Flutter
关注(0)|答案(2)|浏览(143)

我想让一个滑块在跳动,数字像.5,1,2,3,4,5,10,15。这怎么可能。我知道分段在滑块中创建线性分段。这是可能有我自己的数字作为每个点,而不是一个线性滑块?

Slider(
  value: seconds,
  max: 3600,
  divisions:
      120, // this is where i want to have a not a linear division
  label: (seconds / 60.0).toStringAsFixed(1),
  onChanged: (double value) {
    setState(() {
      seconds = value;
    });
  },
),
axzmvihb

axzmvihb1#

我认为下面的片段就是你要找的:

final List<double> values = [0.5, 1.0, 2.0, 3.0, 4.0, 5.0, 10.0, 15.0];
int selectedIndex = 0;

Slider(
   value: selectedIndex.toDouble(),
   min: 0,
   max: values.length - 1,
   divisions: values.length - 1,
   label: values[selectedIndex].toString(),
   onChanged: (double value) {
   setState(() {
        selectedIndex = value.toInt();
      });
   },
),

结果如下:

ut6juiuv

ut6juiuv2#

基于jnk.sch答案的自定义小部件

  • custom_labels_slider.dart*
import 'package:flutter/material.dart';

class CustomLabelsSlider extends StatelessWidget {
  final List<String> labels;
  final int selectedIndex;
  final void Function(int) onChanged;

  const CustomLabelsSlider(
      {super.key,
      required this.labels,
      required this.onChanged,
      required this.selectedIndex});

  @override
  Widget build(BuildContext context) {
    return Slider(
        value: selectedIndex.toDouble(),
        min: 0,
        max: labels.length - 1,
        divisions: labels.length - 1,
        label: labels[selectedIndex],
        onChanged: (val) {
          onChanged(val.toInt());
        });
  }
}

奖励:RangeSlider。

  • custom_labels_range_slider.dart*
import 'package:flutter/material.dart';

class CustomLabelsRangeSlider extends StatelessWidget {
  final List<String> labels;
  final int selectedStart;
  final int selectedEnd;
  final void Function(int, int) onChanged;

  const CustomLabelsRangeSlider(
      {super.key,
      required this.labels,
      required this.onChanged,
      required this.selectedStart,
      required this.selectedEnd});

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
        values: RangeValues(selectedStart.toDouble(), selectedEnd.toDouble()),
        min: 0,
        max: labels.length - 1,
        divisions: labels.length - 1,
        labels: RangeLabels(labels[selectedStart], labels[selectedEnd]),
        onChanged: (val) {
          onChanged(val.start.toInt(), val.end.toInt());
        });
  }
}

用途:

  • 主.dart*
import 'package:custom_labels_slider/custom_labels_range_slider.dart';
import 'package:custom_labels_slider/custom_labels_slider.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() {
    return _MainAppState();
  }
}

class _MainAppState extends State<MainApp> {
  List<String> labels = ['0.5', '1.0', '2.0', '3.0', '4.0', '5.0', '10.0', '15.0'];
  int _selectedIndex = 0;

  int _selectedStart = 0;
  int _selectedEnd = 0;

  void changeSelectedIndex(int value) {
    setState(() {
      _selectedIndex = value;
    });
  }

  void changeRange(int start, int end){
    setState(() {
    _selectedStart = start;
    _selectedEnd = end;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomLabelsSlider(
              labels: labels,
              selectedIndex: _selectedIndex,
              onChanged: (val) {
                changeSelectedIndex(val);
              },
            ),
            const SizedBox(height: 50,),
             CustomLabelsRangeSlider(
              labels: labels,
              selectedStart: _selectedStart,
              selectedEnd: _selectedEnd,
              onChanged: (start, end) {
                changeRange(start, end);
              },
            ),
          ],
        )),
      ),
    );
  }
}

Github

相关问题