如何在Flutter中增加滑块轨道的宽度

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

- Lalit Rawat

---

你能添加UI或图像吗？ - satish

已添加图像UI，请查看上面的链接。 - Lalit Rawat

无法看到图片或URL。 - satish

尝试将滑块作为Expanded的子元素。 - Shady Mohamed Sherif

Answer 1

您可以使用 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;
                  });
                },
              ),
            ),
          ),

- Sachin

Answer 2

以下这个简化的解决方案适用于我:

 SliderTheme(
    data: SliderTheme.of(context).copyWith(
       overlayShape: SliderComponentShape.noOverlay,
    ),
    child: Slider(),
 )

- Donat Kabashi

---

直接点，谢谢。 - Ahmed Ezzat

测试了一下，看起来是个不错的解决方案。你赢得了一个点。 - Ishmael Mavor Raines

Answer 3

如果我理解你的问题正确，我认为你所指的是滑块小部件本身左右固有填充。这是由于滑块轨道需要在轨道两端为拇指和覆盖留出空间。您可以使用自定义RoundedRectSliderTrackShape并将其添加到SliderThemeData中的trackShape:参数来覆盖此内容。@clocksmith在Flutter问题页面上描述了如何执行此操作的示例。基本上，代码示例如下：

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问题页面上发现了这个答案。所有的功劳归原作者！

- Tarique Naseem

Answer 4

如果您想让子组件充满父组件的宽度。
请使用Expanded进行包裹。

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

- Himansa Eshan

Answer 5

将Slider用SliderThemeData包装并更改trackHeight

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

- saigopi.me

Answer 6

如果你想让滑块的宽度适应应用屏幕的宽度，那么请使用SliderTheme将滑块包装起来，并设置overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0)以获取最大的滑块宽度。

- user16332819

Answer 7

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

- Matiullah Karimi