浏览代码

add slider demo and fix bug

/siyaoH-1.17-PlatformMessage
xingwei.zhu 4 年前
当前提交
87d7ffd8
共有 3 个文件被更改,包括 450 次插入3 次删除
  1. 9
      Samples/UIWidgetsSamples_2019_4/Assets/UIWidgetsGallery/gallery/demos.cs
  2. 6
      com.unity.uiwidgets/Runtime/material/range_slider.cs
  3. 438
      Samples/UIWidgetsSamples_2019_4/Assets/UIWidgetsGallery/demo/material/slider_demo.cs

9
Samples/UIWidgetsSamples_2019_4/Assets/UIWidgetsGallery/gallery/demos.cs


buildRoute: (BuildContext context) => new SelectionControlsDemo()
),
new GalleryDemo(
title: "Sliders",
subtitle: "Widgets for selecting a value by swiping",
icon: GalleryIcons.sliders,
category: GalleryDemoCategory._kMaterialComponents,
routeName: SliderDemo.routeName,
documentationUrl: "https://docs.flutter.io/flutter/material/Slider-class.html",
buildRoute: (BuildContext context) => new SliderDemo()
),
new GalleryDemo(
title: "Dialogs",
subtitle: "Simple, alert, and fullscreen",
icon: GalleryIcons.dialogs,

6
com.unity.uiwidgets/Runtime/material/range_slider.cs


}
class _RangeSliderState : SingleTickerProviderStateMixin<RangeSlider> {
class _RangeSliderState : TickerProviderStateMixin<RangeSlider> {
static readonly TimeSpan enableAnimationDuration = new TimeSpan(0, 0, 0, 0, 75);
static readonly TimeSpan valueIndicatorAnimationDuration = new TimeSpan(0, 0, 0, 0, 100);

float _discretize(float value) {
float result = value.clamp(0.0f, 1.0f);
if (isDiscrete) {
result = (result * divisions.Value).round() / divisions.Value;
result = (result * divisions.Value).round() * 1.0f / divisions.Value;
}
return result;

);
}
void paint(PaintingContext context, Offset offset) {
public override void paint(PaintingContext context, Offset offset) {
float startValue = _state.startPositionController.value;
float endValue = _state.endPositionController.value;

438
Samples/UIWidgetsSamples_2019_4/Assets/UIWidgetsGallery/demo/material/slider_demo.cs


using System.Collections.Generic;
using uiwidgets;
using UIWidgetsGallery.gallery;
using Unity.UIWidgets.animation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.rendering;
using Unity.UIWidgets.service;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using UnityEngine;
using Canvas = Unity.UIWidgets.ui.Canvas;
using Color = Unity.UIWidgets.ui.Color;
namespace UIWidgetsGallery.demo.material
{
class SliderDemo : StatefulWidget {
public static readonly string routeName = "/material/slider";
public override State createState() => new _SliderDemoState();
}
static class SliderDemoUtils
{
public static Path _downTriangle(float size, Offset thumbCenter, bool invert = false) {
Path thumbPath = new Path();
float height = Mathf.Sqrt(3.0f) / 2.0f;
float centerHeight = size * height / 3.0f;
float halfSize = size / 2.0f;
float sign = invert ? -1.0f : 1.0f;
thumbPath.moveTo(thumbCenter.dx - halfSize, thumbCenter.dy + sign * centerHeight);
thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2.0f * sign * centerHeight);
thumbPath.lineTo(thumbCenter.dx + halfSize, thumbCenter.dy + sign * centerHeight);
thumbPath.close();
return thumbPath;
}
public static Path _rightTriangle(float size, Offset thumbCenter, bool invert = false) {
Path thumbPath = new Path();
float halfSize = size / 2.0f;
float sign = invert ? -1.0f : 1.0f;
thumbPath.moveTo(thumbCenter.dx + halfSize * sign, thumbCenter.dy);
thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy - size);
thumbPath.lineTo(thumbCenter.dx - halfSize * sign, thumbCenter.dy + size);
thumbPath.close();
return thumbPath;
}
public static Path _upTriangle(float size, Offset thumbCenter) => _downTriangle(size, thumbCenter, invert: true);
public static Path _leftTriangle(float size, Offset thumbCenter) => _rightTriangle(size, thumbCenter, invert: true);
}
class _CustomRangeThumbShape : RangeSliderThumbShape {
const float _thumbSize = 4.0f;
const float _disabledThumbSize = 3.0f;
public override Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return isEnabled ? Size.fromRadius(_thumbSize) : Size.fromRadius(_disabledThumbSize);
}
static readonly Animatable<float> sizeTween = new FloatTween(
begin: _disabledThumbSize,
end: _thumbSize
);
public override void paint(
PaintingContext context,
Offset center,
Animation<float> activationAnimation = null,
Animation<float> enableAnimation = null,
bool isDiscrete = false,
bool isEnabled = false,
bool? isOnTop = null,
TextDirection? textDirection = null,
SliderThemeData sliderTheme = null,
Thumb? thumb = null
) {
Canvas canvas = context.canvas;
ColorTween colorTween = new ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.thumbColor
);
float size = _thumbSize * sizeTween.evaluate(enableAnimation);
Path thumbPath = null;
switch (textDirection) {
case TextDirection.rtl:
switch (thumb) {
case Thumb.start:
thumbPath = SliderDemoUtils._rightTriangle(size, center);
break;
case Thumb.end:
thumbPath = SliderDemoUtils._leftTriangle(size, center);
break;
}
break;
case TextDirection.ltr:
switch (thumb) {
case Thumb.start:
thumbPath = SliderDemoUtils._leftTriangle(size, center);
break;
case Thumb.end:
thumbPath = SliderDemoUtils._rightTriangle(size, center);
break;
}
break;
}
canvas.drawPath(thumbPath, new Paint{color = colorTween.evaluate(enableAnimation)});
}
}
class _CustomThumbShape : SliderComponentShape {
const float _thumbSize = 4.0f;
const float _disabledThumbSize = 3.0f;
public override Size getPreferredSize(bool isEnabled, bool isDiscrete, TextPainter textPainter) {
return isEnabled ? Size.fromRadius(_thumbSize) : Size.fromRadius(_disabledThumbSize);
}
static readonly Animatable<float> sizeTween = new FloatTween(
begin: _disabledThumbSize,
end: _thumbSize
);
public override void paint(
PaintingContext context,
Offset center,
Animation<float> activationAnimation = null,
Animation<float> enableAnimation = null,
bool isDiscrete = false,
TextPainter labelPainter = null,
RenderBox parentBox = null,
SliderThemeData sliderTheme = null,
TextDirection? textDirection = null,
float? value = null) {
Canvas canvas = context.canvas;
ColorTween colorTween = new ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.thumbColor
);
float size = _thumbSize * sizeTween.evaluate(enableAnimation);
Path thumbPath = SliderDemoUtils._downTriangle(size, center);
canvas.drawPath(thumbPath, new Paint{color = colorTween.evaluate(enableAnimation)});
}
}
class _CustomValueIndicatorShape : SliderComponentShape {
const float _indicatorSize = 4.0f;
const float _disabledIndicatorSize = 3.0f;
const float _slideUpHeight = 40.0f;
public override Size getPreferredSize(bool isEnabled, bool isDiscrete, TextPainter textPainter) {
return Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);
}
static readonly Animatable<float> sizeTween = new FloatTween(
begin: _disabledIndicatorSize,
end: _indicatorSize
);
public override void paint(
PaintingContext context,
Offset center,
Animation<float> activationAnimation = null,
Animation<float> enableAnimation = null,
bool isDiscrete = false,
TextPainter labelPainter = null,
RenderBox parentBox = null,
SliderThemeData sliderTheme = null,
TextDirection? textDirection = null,
float? value = null){
Canvas canvas = context.canvas;
ColorTween enableColor = new ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.valueIndicatorColor
);
Tween<float> slideUpTween = new FloatTween(
begin: 0.0f,
end: _slideUpHeight
);
float size = _indicatorSize * sizeTween.evaluate(enableAnimation);
Offset slideUpOffset = new Offset(0.0f, -slideUpTween.evaluate(activationAnimation));
Path thumbPath = SliderDemoUtils._upTriangle(size, center + slideUpOffset);
Color paintColor = enableColor.evaluate(enableAnimation).withAlpha((255.0f * activationAnimation.value).round());
canvas.drawPath(
thumbPath,
new Paint{color = paintColor}
);
canvas.drawLine(
center,
center + slideUpOffset,
new Paint
{
color = paintColor,
style = PaintingStyle.stroke,
strokeWidth = 2.0f
});
labelPainter.paint(canvas, center + slideUpOffset + new Offset(-labelPainter.width / 2.0f, -labelPainter.height - 4.0f));
}
}
class _SliderDemoState : State<SliderDemo> {
public override Widget build(BuildContext context) {
List<ComponentDemoTabData> demos = new List<ComponentDemoTabData>{
new ComponentDemoTabData(
tabName: "SINGLE",
description: "Sliders containing 1 thumb",
demoWidget: new _Sliders(),
documentationUrl: "https://docs.flutter.io/flutter/material/Slider-class.html"
),
new ComponentDemoTabData(
tabName: "RANGE",
description: "Sliders containing 2 thumbs",
demoWidget: new _RangeSliders(),
documentationUrl: "https://docs.flutter.io/flutter/material/RangeSlider-class.html"
)
};
return new TabbedComponentDemoScaffold(
title: "Sliders",
demos: demos,
isScrollable: false,
showExampleCodeAction: false
);
}
}
class _Sliders : StatefulWidget {
public override State createState() => new _SlidersState();
}
class _SlidersState : State<_Sliders> {
float _continuousValue = 25.0f;
float _discreteValue = 20.0f;
float _discreteCustomValue = 25.0f;
public override Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
return new Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0f),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: new List<Widget>{
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new SizedBox(
width: 64,
height: 48,
child: new TextField(
textAlign: TextAlign.center,
onSubmitted: (string value) => {
float.TryParse(value, out float newValue);
if (newValue != null && newValue != _continuousValue) {
setState(() => {
_continuousValue = newValue.clamp(0.0f, 100.0f);
});
}
},
keyboardType: TextInputType.number,
controller: new TextEditingController(
text: $"{_continuousValue:F0}"
)
)
),
Slider.adaptive(
value: _continuousValue,
min: 0.0f,
max: 100.0f,
onChanged: (float value) => {
setState(() => {
_continuousValue = value;
});
}
),
new Text("Continuous with Editable Numerical Value")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
Slider.adaptive(value: 0.25f, onChanged: null),
new Text("Disabled")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
Slider.adaptive(
value: _discreteValue,
min: 0.0f,
max: 200.0f,
divisions: 5,
label: $"{_discreteValue.round()}",
onChanged: (float value) => {
setState(() => {
_discreteValue = value;
});
}
),
new Text("Discrete")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new SliderTheme(
data: theme.sliderTheme.copyWith(
activeTrackColor: Colors.deepPurple,
inactiveTrackColor: theme.colorScheme.onSurface.withOpacity(0.5f),
activeTickMarkColor: theme.colorScheme.onSurface.withOpacity(0.7f),
inactiveTickMarkColor: theme.colorScheme.surface.withOpacity(0.7f),
overlayColor: theme.colorScheme.onSurface.withOpacity(0.12f),
thumbColor: Colors.deepPurple,
valueIndicatorColor: Colors.deepPurpleAccent,
thumbShape: new _CustomThumbShape(),
valueIndicatorShape: new _CustomValueIndicatorShape(),
valueIndicatorTextStyle: theme.accentTextTheme.bodyText1.copyWith(color: theme.colorScheme.onSurface)
),
child: new Slider(
value: _discreteCustomValue,
min: 0.0f,
max: 200.0f,
divisions: 5,
label: $"{_discreteCustomValue.round()}",
onChanged: (float value) => {
setState(() => {
_discreteCustomValue = value;
});
}
)
),
new Text("Discrete with Custom Theme")
}
)
}
)
);
}
}
class _RangeSliders : StatefulWidget {
public override State createState() => new _RangeSlidersState();
}
class _RangeSlidersState : State<_RangeSliders> {
RangeValues _continuousValues = new RangeValues(25.0f, 75.0f);
RangeValues _discreteValues = new RangeValues(40.0f, 120.0f);
RangeValues _discreteCustomValues = new RangeValues(40.0f, 160.0f);
public override Widget build(BuildContext context) {
return new Padding(
padding: EdgeInsets.symmetric(horizontal: 40.0f),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: new List<Widget>{
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new RangeSlider(
values: _continuousValues,
min: 0.0f,
max: 100.0f,
onChanged: (RangeValues values) => {
setState(() => {
_continuousValues = values;
});
}
),
new Text("Continuous")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new RangeSlider(values: new RangeValues(0.25f, 0.75f), onChanged: null),
new Text("Disabled")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new RangeSlider(
values: _discreteValues,
min: 0.0f,
max: 200.0f,
//divisions: 5,
labels: new RangeLabels($"{_discreteValues.start.round()}", $"{_discreteValues.end.round()}"),
onChanged: (RangeValues values) => {
setState(() => {
_discreteValues = values;
});
}
),
new Text("Discrete")
}
),
new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget>{
new SliderTheme(
data: new SliderThemeData(
activeTrackColor: Colors.deepPurple,
inactiveTrackColor: Colors.black26,
activeTickMarkColor: Colors.white70,
inactiveTickMarkColor: Colors.black,
overlayColor: Colors.black12,
thumbColor: Colors.deepPurple,
rangeThumbShape: new _CustomRangeThumbShape(),
showValueIndicator: ShowValueIndicator.never
),
child: new RangeSlider(
values: _discreteCustomValues,
min: 0.0f,
max: 200.0f,
divisions: 5,
labels: new RangeLabels($"{_discreteCustomValues.start.round()}", $"{_discreteCustomValues.end.round()}"),
onChanged: (RangeValues values) => {
setState(() => {
_discreteCustomValues = values;
});
}
)
),
new Text("Discrete with Custom Theme")
}
)
}
)
);
}
}
}
正在加载...
取消
保存