Question

在SliderThemeData中给出了trackheight，但我想增加轨道的宽度。

这是我当前的代码：

SliderTheme(
    data: SliderThemeData(
      trackHeight: 1,
    ),
    child: RangeSlider(
      min: 0.0, 
      max: 4.0,
      onChanged: _onChange,
      values: state.value,
      onChangeEnd: _onChangeEnd,
      inactiveColor: Colors.grey,
      activeColor: Theme.of(state.context).accentColor,
    ),
),

Answer 1

如果我正确理解了您的问题，我认为您指的是Slider小部件本身左侧和右侧的固有填充。

这取决于滑块轨道，该轨道的两端需要有空间用于拇指和覆盖物。

您可以使用自定义RoundedRectSliderTrackShape并将其添加到SliderThemeData中的trackShape:参数中。

@clocksmith的described here on the Flutter issues page是一个有关如何执行此操作的示例。基本上，代码示例是：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: SliderTheme(
          data: SliderThemeData(
            trackShape: CustomTrackShape(),
          ),
          child: Slider(
            value: _value,
            onChanged: (double value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

class CustomTrackShape extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
    @required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

很显然，我对此没有任何贡献。当我在Flutter问题页面上找到此答案时，我正在寻找类似的解决方案。全部归功于原始作者！

Answer 2

RangeSlider根据其父宽度更改其宽度，因此用容器包装RangeSlider并赋予容器width属性。

Container(
  width: 300,
  child: RangeSlider(
     min: 0.0,
     max: 4.0,
     onChanged: _onChange,
     values: state.value,
     onChangeEnd: _onChangeEnd,
     inactiveColor: Colors.grey,
     activeColor: Theme.of(state.context).accentColor,
  ),
),

Answer 3

您可以使用SliderTheme定制滑块的外观，并用Container包裹Slider以为滑块提供自定义宽度。它将容器宽度作为滑块宽度。

  SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: Colors.blue,
              inactiveTrackColor: Colors.blue,
              trackShape: RectangularSliderTrackShape(),
              trackHeight: 4.0,
              thumbColor: Colors.blueAccent,
              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
              overlayColor: Colors.red.withAlpha(32),
              overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
            ),
            child: Container(
              width: 400,
              child: Slider(
                min: 0,
                max: 1000,
                divisions: 5,
                value: _currentFontSize,
                onChanged: (value) {
                  setState(() {
                    _currentFontSize = value;
                  });
                },
              ),
            ),
          ),

Answer 4

如果要将 Slider 的宽度适合应用屏幕宽度，则用 SliderTheme 包裹 Slider 并设置 overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0) 以获得滑块的最大宽度

Answer 5

如果你想要全宽的父级。
用 Expanded 换行。

          Row(
            children: [
              Expanded(
                child: Slider(
                  value: 10,
                  onChanged: (val) {},
                  min: 0,
                  max: 100,
                ),
              ),
            ],
          )

如何增加颤振中的滑块轨道宽度

5 个答案: