如何在颤动中增加滑块轨道宽度答案

【问题标题】：How to increase slider track width in flutter如何在颤动中增加滑块轨道宽度
【发布时间】：2019-07-30 11:47:50
【问题描述】：

在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,
    ),
),

【问题讨论】：

可以添加 UI 或图片吗？
图片ui添加请看上面的链接
看不到图片或网址。

标签： flutter dart

【解决方案1】：

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

这归结为滑块轨道需要在轨道的任一端留出空间用于拇指和覆盖。

您可以使用带有自定义RoundedRectSliderTrackShape 的a 覆盖它，并将其添加到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 问题页面上看到这个答案时，我正在寻找类似的解决方案。全部归功于原作者！

【讨论】：

【解决方案2】：

如果你想全宽父母。
用 Expanded 换行。

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

【讨论】：

【解决方案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;
                  });
                },
              ),
            ),
          ),

【讨论】：

【解决方案4】：

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,
  ),
),

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

用SliderThemeData 包裹Slider 并更改trackHeight

SliderThemeData(
        trackHeight: 2, // change height here
     ),
      child: Slider(),
    ),

【讨论】：