gpt4 book ai didi

flutter - 如何在 flutter 中使用拇指创建一个范围 slider 作为png图像

转载 作者:行者123 更新时间:2023-12-05 00:28:41 25 4
gpt4 key购买 nike

如何在 flutter 中创建笑脸范围 slider 。就像下面的 GIF 图片。 enter image description here

与自定义主题离散我尝试更改拇指形状。但我想将拇指更改为图像。

// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math' as math;

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
static const String routeName = '/material/slider';

@override
_SliderDemoState createState() => new _SliderDemoState();
}

Path _triangle(double size, Offset thumbCenter, {bool invert = false}) {
final Path thumbPath = new Path();
final double height = math.sqrt(3.0) / 2.0;
final double halfSide = size / 2.0;
final double centerHeight = size * height / 3.0;
final double sign = invert ? -1.0 : 1.0;
thumbPath.moveTo(thumbCenter.dx - halfSide, thumbCenter.dy + sign * centerHeight);
thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2.0 * sign * centerHeight);
thumbPath.lineTo(thumbCenter.dx + halfSide, thumbCenter.dy + sign * centerHeight);
thumbPath.close();
return thumbPath;
}

class _CustomThumbShape extends SliderComponentShape {
static const double _thumbSize = 4.0;
static const double _disabledThumbSize = 5.0;

@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return isEnabled ? const Size.fromRadius(_thumbSize) : const Size.fromRadius(_disabledThumbSize);
}

static final Tween<double> sizeTween = new Tween<double>(
begin: _disabledThumbSize,
end: _thumbSize,
);

@override
void paint(
PaintingContext context,
Offset thumbCenter, {
Animation<double> activationAnimation,
Animation<double> enableAnimation,
bool isDiscrete,
TextPainter labelPainter,
RenderBox parentBox,
SliderThemeData sliderTheme,
TextDirection textDirection,
double value,
}) {
final Canvas canvas = context.canvas;
final ColorTween colorTween = new ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.thumbColor,
);
final double size = _thumbSize * sizeTween.evaluate(enableAnimation);
final Path thumbPath = _triangle(size, thumbCenter);
canvas.drawPath(thumbPath, new Paint()..color = colorTween.evaluate(enableAnimation));
}
}

class _CustomValueIndicatorShape extends SliderComponentShape {
static const double _indicatorSize = 4.0;
static const double _disabledIndicatorSize = 3.0;
static const double _slideUpHeight = 40.0;

@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return new Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);
}

static final Tween<double> sizeTween = new Tween<double>(
begin: _disabledIndicatorSize,
end: _indicatorSize,
);

@override
void paint(
PaintingContext context,
Offset thumbCenter, {
Animation<double> activationAnimation,
Animation<double> enableAnimation,
bool isDiscrete,
TextPainter labelPainter,
RenderBox parentBox,
SliderThemeData sliderTheme,
TextDirection textDirection,
double value,
}) {
final Canvas canvas = context.canvas;
final ColorTween enableColor = new ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.valueIndicatorColor,
);
final Tween<double> slideUpTween = new Tween<double>(
begin: 0.0,
end: _slideUpHeight,
);
final double size = _indicatorSize * sizeTween.evaluate(enableAnimation);
final Offset slideUpOffset = new Offset(0.0, -slideUpTween.evaluate(activationAnimation));
final Path thumbPath = _triangle(
size,
thumbCenter + slideUpOffset,
invert: true,
);
final Color paintColor = enableColor.evaluate(enableAnimation).withAlpha((255.0 * activationAnimation.value).round());
canvas.drawPath(
thumbPath,
new Paint()..color = paintColor,
);
canvas.drawLine(
thumbCenter,
thumbCenter + slideUpOffset,
new Paint()
..color = paintColor
..style = PaintingStyle.stroke
..strokeWidth = 2.0);
labelPainter.paint(canvas, thumbCenter + slideUpOffset + new Offset(-labelPainter.width / 2.0, -labelPainter.height - 4.0));
}
}

class _SliderDemoState extends State<SliderDemo> {
double _value = 25.0;
double _discreteValue = 20.0;

@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return new Scaffold(
appBar: new AppBar(title: const Text('Sliders')),
body: new Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Slider(
value: _value,
min: 0.0,
max: 100.0,
onChanged: (double value) {
setState(() {
_value = value;
});
},
),
const Text('Continuous'),
],
),
new Column(
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
const Slider(value: 0.25, onChanged: null),
const Text('Disabled'),
],
),
new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Slider(
value: _discreteValue,
min: 0.0,
max: 200.0,
divisions: 5,
label: '${_discreteValue.round()}',
onChanged: (double value) {
setState(() {
_discreteValue = value;
});
},
),
const Text('Discrete'),
],
),
new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new SliderTheme(
data: theme.sliderTheme.copyWith(
activeTrackColor: Colors.deepPurple,
inactiveTrackColor: Colors.black26,
activeTickMarkColor: Colors.white70,
inactiveTickMarkColor: Colors.black,
overlayColor: Colors.black12,
thumbColor: Colors.red,
valueIndicatorColor: Colors.deepPurpleAccent,
thumbShape: new _CustomThumbShape(),
valueIndicatorShape: new _CustomValueIndicatorShape(),
valueIndicatorTextStyle: theme.accentTextTheme.body2.copyWith(color: Colors.black87),
),
child: new Slider(
value: _discreteValue,
min: 0.0,
max: 10.0,
divisions: 5,
//semanticFormatterCallback: (double value) => value.round().toString(),
label: '${_discreteValue.round()}',
onChanged: (double value) {
setState(() {
_discreteValue = value;
});
},
),
),
const Text('Discrete with Custom Theme'),
],
),
],
),
),
);
}
}

最佳答案

您需要创建自定义 slider 。

让我们拆分任务:

手势:

  • 点击,当用户点击其中一个标签时。
  • 拖动,当用户拖动指示器时。

  • 动画:
  • 背景动画
  • 移动文字
  • 缩放头
  • 切换器动画:
  • 颜色
  • 面对

  • 额外的:
    - 需要考虑当用户停止在两个标签之间吸毒时该怎么办。

    经过 15 个小时的思考和编码,我有:

    enter image description here
    import 'package:flutter/material.dart';
    import 'package:vector_math/vector_math.dart' as v_math;

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

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: Scaffold(
    body: SafeArea(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    Text('How was the help you recived?', style: TextStyle(color: Color(0xFF6f7478), fontSize: 18),),
    SizedBox(height: 20),
    ReviewSlider()
    ],
    ),
    ),
    ),
    );
    }
    }

    class ReviewSlider extends StatefulWidget {
    @override
    _ReviewSliderState createState() => _ReviewSliderState();
    }

    class _ReviewSliderState extends State<ReviewSlider> with SingleTickerProviderStateMixin {
    double intitalReviewValue = 2;
    final List<String> reviews = ['Terrible', 'Bad', 'Okay', 'Good', 'Great'];

    Animation<double> _animation;
    AnimationController _controller;
    Tween<double> _tween;
    double _innerWidth;
    double _animationValue;

    @override
    void initState() {
    super.initState();

    _controller = AnimationController(
    value: intitalReviewValue,
    vsync: this,
    duration: Duration(milliseconds: 400),
    );
    _tween = Tween(end: intitalReviewValue);
    _animation = _tween.animate(
    CurvedAnimation(
    curve: Curves.easeIn,
    parent: _controller,
    ),
    )..addListener(() {
    setState(() {
    _animationValue = _animation.value;
    });
    });
    _animationValue = intitalReviewValue;
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    }

    _afterLayout(_) {
    setState(() {
    _innerWidth = MediaQuery.of(context).size.width - 2 * paddingSize;
    });
    }

    void handleTap(int state) {
    _controller.duration = Duration(milliseconds: 400);

    _tween.begin = _tween.end;
    _tween.end = state.toDouble();
    _controller.reset();
    _controller.forward();
    }

    _onDrag(details) {
    var newAnimatedValue = _calcAnimatedValueFormDragX(
    details.globalPosition.dx,
    );
    if (newAnimatedValue > 0 && newAnimatedValue < reviews.length - 1) {
    setState(
    () {
    _animationValue = newAnimatedValue;
    },
    );
    }
    }

    _calcAnimatedValueFormDragX(x) {
    return (x - circleDiameter / 2 - paddingSize * 2) / _innerWidth * reviews.length;
    }

    _onDragEnd(_) {
    _controller.duration = Duration(milliseconds: 100);
    _tween.begin = _animationValue;
    _tween.end = _animationValue.round().toDouble();
    _controller.reset();
    _controller.forward();
    }

    @override
    void dispose() {
    super.dispose();
    _controller.dispose();
    }

    @override
    Widget build(BuildContext context) {
    return Center(
    child: _innerWidth == null
    ? Container()
    : Container(
    padding: EdgeInsets.symmetric(horizontal: paddingSize),
    height: 200,
    child: Stack(children: <Widget>[
    MeasureLine(
    states: reviews,
    handleTap: handleTap,
    animationValue: _animationValue,
    width: _innerWidth,
    ),
    MyIndicator(
    animationValue: _animationValue,
    width: _innerWidth,
    onDrag: _onDrag,
    onDragEnd: _onDragEnd,
    ),
    Text(_animationValue.round().toString()),
    ]),
    ),
    );
    }
    }

    const double circleDiameter = 60;
    const double paddingSize = 10;

    class MeasureLine extends StatelessWidget {
    MeasureLine({this.handleTap, this.animationValue, this.states, this.width});

    final double animationValue;
    final Function handleTap;
    final List<String> states;
    final double width;

    List<Widget> _buildUnits() {
    var res = <Widget>[];
    var animatingUnitIndex = animationValue.round();
    var unitAnimatingValue = (animationValue * 10 % 10 / 10 - 0.5).abs() * 2;

    states.asMap().forEach((index, text) {
    var paddingTop = 0.0;
    var scale = 0.7;
    var opacity = .3;
    if (animatingUnitIndex == index) {
    paddingTop = unitAnimatingValue * 5;
    scale = (1 - unitAnimatingValue) * 0.7;
    opacity = 0.3 + unitAnimatingValue * 0.7;
    }
    res.add(LimitedBox(
    key: ValueKey(text),
    maxWidth: circleDiameter,
    child: GestureDetector(
    onTap: () {
    handleTap(index);
    },
    child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
    Transform.scale(
    scale: scale,
    child: Stack(
    children: [
    Head(),
    Face(
    color: Colors.white,
    animationValue: index.toDouble(),
    )
    ],
    )),
    Padding(
    padding: EdgeInsets.only(top: paddingTop),
    child: Opacity(
    opacity: opacity,
    child: Text(
    text,
    style: TextStyle(color: Colors.black),
    ),
    ),
    )
    ],
    ),
    ),
    ));
    });
    return res;
    }

    @override
    Widget build(BuildContext context) {
    return Stack(
    children: <Widget>[
    Positioned(
    top: circleDiameter / 2,
    left: 20,
    width: width - 40,
    child: Container(
    width: width,
    color: Color(0xFFeceeef),
    height: 3,
    ),
    ),
    Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: _buildUnits(),
    ),
    ],
    );
    }
    }

    class Face extends StatelessWidget {
    Face({
    this.color = const Color(0xFF616154),
    this.animationValue,
    });

    final Color color;
    final double animationValue;

    @override
    Widget build(BuildContext context) {
    return Container(
    height: circleDiameter,
    width: circleDiameter,
    child: CustomPaint(
    size: Size(300, 300),
    painter: MyPainter(animationValue, color: color),
    ),
    );
    }
    }

    class MyPainter extends CustomPainter {
    MyPainter(
    animationValue, {
    this.color = const Color(0xFF615f56),
    }) : activeIndex = animationValue.floor(),
    unitAnimatingValue = (animationValue * 10 % 10 / 10);

    Color color;
    final int activeIndex;
    final double unitAnimatingValue;

    @override
    void paint(Canvas canvas, Size size) {
    _drawEye(canvas, size);
    _drawMouth(canvas, size);
    }

    _drawEye(canvas, size) {
    var angle = 0.0;
    var wide = 0.0;

    switch (activeIndex) {
    case 0:
    angle = 55 - unitAnimatingValue * 50;
    wide = 80.0;
    break;
    case 1:
    wide = 80 - unitAnimatingValue * 80;
    angle = 5;
    break;
    }
    var degree1 = 90 * 3 + angle;
    var degree2 = 90 * 3 - angle + wide;
    var x1 = size.width / 2 * 0.65;
    var x2 = size.width - x1;
    var y = size.height * 0.41;
    var eyeRadius = 5.0;

    var paint = Paint()..color = color;
    canvas.drawArc(
    Rect.fromCircle(
    center: Offset(x1, y),
    radius: eyeRadius,
    ),
    v_math.radians(degree1),
    v_math.radians(360 - wide),
    false,
    paint,
    );
    canvas.drawArc(
    Rect.fromCircle(
    center: Offset(x2, y),
    radius: eyeRadius,
    ),
    v_math.radians(degree2),
    v_math.radians(360 - wide),
    false,
    paint,
    );
    }

    _drawMouth(Canvas canvas, size) {
    var upperY = size.height * 0.70;
    var lowerY = size.height * 0.77;
    var middleY = (lowerY - upperY) / 2 + upperY;

    var leftX = size.width / 2 * 0.65;
    var rightX = size.width - leftX;
    var middleX = size.width / 2;

    double y1, y3, x2, y2;
    Path path2;
    switch (activeIndex) {
    case 0:
    y1 = lowerY;
    x2 = middleX;
    y2 = upperY;
    y3 = lowerY;
    break;
    case 1:
    y1 = lowerY;
    x2 = middleX;
    y2 = unitAnimatingValue * (middleY - upperY) + upperY;
    y3 = lowerY - unitAnimatingValue * (lowerY - upperY);
    break;
    case 2:
    y1 = unitAnimatingValue * (upperY - lowerY) + lowerY;
    x2 = middleX;
    y2 = unitAnimatingValue * (lowerY + 3 - middleY) + middleY;
    y3 = upperY;
    break;
    case 3:
    y1 = upperY;
    x2 = middleX;
    y2 = lowerY + 3;
    y3 = upperY;
    path2 = Path()
    ..moveTo(leftX, y1)
    ..quadraticBezierTo(
    x2,
    y2,
    upperY - 2.5,
    y3 - 2.5,
    )
    ..quadraticBezierTo(
    x2,
    y2 - unitAnimatingValue * (y2 - upperY + 2.5),
    leftX,
    upperY - 2.5,
    )
    ..close();
    break;
    case 4:
    y1 = upperY;
    x2 = middleX;
    y2 = lowerY + 3;
    y3 = upperY;
    path2 = Path()
    ..moveTo(leftX, y1)
    ..quadraticBezierTo(
    x2,
    y2,
    upperY - 2.5,
    y3 - 2.5,
    )
    ..quadraticBezierTo(
    x2,
    upperY - 2.5,
    leftX,
    upperY - 2.5,
    )
    ..close();
    break;
    }
    var path = Path()
    ..moveTo(leftX, y1)
    ..quadraticBezierTo(
    x2,
    y2,
    rightX,
    y3,
    );

    canvas.drawPath(
    path,
    Paint()
    ..color = color
    ..style = PaintingStyle.stroke
    ..strokeCap = StrokeCap.round
    ..strokeWidth = 5);

    if (path2 != null) {
    canvas.drawPath(
    path2,
    Paint()
    ..color = color
    ..style = PaintingStyle.fill
    ..strokeCap = StrokeCap.round,
    );
    }
    }

    @override
    bool shouldRepaint(MyPainter oldDelegate) {
    return unitAnimatingValue != oldDelegate.unitAnimatingValue ||
    activeIndex != oldDelegate.activeIndex;
    }
    }

    class MyIndicator extends StatelessWidget {
    MyIndicator({
    this.animationValue,
    width,
    this.onDrag,
    this.onDragStart,
    this.onDragEnd,
    }) : width = width - circleDiameter,
    possition = animationValue == 0 ? 0 : animationValue / 4;

    final double possition;
    final Function onDrag;
    final Function onDragStart;
    final Function onDragEnd;
    final double width;
    final double animationValue;

    @override
    Widget build(BuildContext context) {
    return Container(
    child: Positioned(
    top: 0,
    left: width * possition,
    child: _buildIndicator(),
    ),
    );
    }

    _buildIndicator() {
    var opacityOfYellow = possition > 0.5 ? 1.0 : possition * 2;
    return GestureDetector(
    onPanDown: onDragStart,
    onPanUpdate: onDrag,
    onPanStart: onDrag,
    onPanEnd: onDragEnd,
    child: Container(
    width: circleDiameter,
    height: circleDiameter,
    child: Stack(
    children: <Widget>[
    Head(
    color: Color(0xFFf4b897),
    hasShadow: true,
    ),
    Opacity(
    opacity: opacityOfYellow,
    child: Head(
    color: Color(0xFFfee385),
    ),
    ),
    Face(
    animationValue: animationValue,
    )
    ],
    ),
    ),
    );
    }
    }

    class Head extends StatelessWidget {
    Head({this.color = const Color(0xFFc9ced2), this.hasShadow = false});

    final Color color;
    final bool hasShadow;

    @override
    Widget build(BuildContext context) {
    return Container(
    height: circleDiameter,
    width: circleDiameter,
    decoration: BoxDecoration(
    boxShadow: hasShadow
    ? [BoxShadow(color: Colors.black26, offset: Offset(0, 2), blurRadius: 5.0)]
    : null,
    color: color,
    shape: BoxShape.circle,
    ),
    );
    }
    }

    https://github.com/kherel/review_slider

    关于flutter - 如何在 flutter 中使用拇指创建一个范围 slider 作为png图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51185894/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com