Question

我正在制作一个 Flutter 应用程序，我很好奇如何制作动画滑块来选择一个值。

类似于这个：https://imgur.com/a/vMouzYB 有这个包吗？

我有一个像条形的东西，但不是这样分割的

       Expanded(
                  flex: 8,
                  child: Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "01",
                              style: TextStyle(
                                  color: Colors.indigoAccent[700],
                                  fontWeight: FontWeight.bold),
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 12),
                              child: Container(
                                width: 6,
                                height: MediaQuery.of(context).size.height / 2.6,
                                decoration: BoxDecoration(
                                  color: Colors.grey[400],
                                  borderRadius: BorderRadius.circular(8),
                                ),
                                child: Stack(
                                  children: [
                                    AnimatedContainer(
                                      height: _indicatorHeight,
                                      decoration: BoxDecoration(
                                        color: Colors.indigoAccent[700],
                                        borderRadius: BorderRadius.circular(8),
                                      ),
                                      duration: Duration(milliseconds: 500),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            Text(
                              "08",
                              style: TextStyle(
                                  color: Colors.indigoAccent[700],
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),

Answer 1

为此，您可以使用 Slider / Widget of the Week video

double _currentSliderValue = 20;

return Slider(
      value: _currentSliderValue,
      min: 0,
      max: 100,
      divisions: 5,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });
      },
    );

剩下的唯一问题是旋转，为此您可以将 Slider 包裹在 RotatedBox

RotatedBox(
  quarterTurns: 3,
  child: YOURSLIVER
)

在您提供的 gif 中，看起来好像您的条子应该在其他一些小部件上。要实现这一点，您可以使用 Stack / Widget of the Week

或者当显示在整个页面的顶部时，您可以使用一个不可见的 ModalBottomSheet / Medium guide

颤动垂直滑块

1 个答案: