Flutter:如何将缩略图添加到Slider? [英] Flutter: How to add thumb Image to Slider?
本文介绍了Flutter:如何将缩略图添加到Slider?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将图像添加到滑块上,但是我不知道它应该如何工作.在SliderThemeData
,我们没有用于添加缩略图的参数.
I tried to add an image to slider thumb, but I haven't an idea of how it should work. At SliderThemeData
we haven't parameters for adding thumb image.
我已经绑定使用SliderComponentShape
来绘制拇指,但是没有用.
I have already tied to use SliderComponentShape
for drawing thumb, but it didn't work.
class TimeReportTextField extends StatefulWidget {
@override
_TimeReportTextFieldState createState() => _TimeReportTextFieldState();
}
class _TimeReportTextFieldState extends State<TimeReportTextField> {
final textFieldController = TextEditingController();
ui.Image customImage;
Future<ui.Image> load(String asset) async {
ByteData data = await rootBundle.load(asset);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
ui.FrameInfo fi = await codec.getNextFrame();
return fi.image;
}
@override
void initState() {
load('images/slider_thumb.png').then((image) {
setState(() {
customImage = image;
});
});
super.initState();
}
@override
void dispose() {
textFieldController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(3),
),
border: Border.all(color: Color(0xFFF4F4F4))),
margin: EdgeInsets.all(12),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
'STD',
style: TextStyle(
fontFamily: 'SF-Pro',
fontSize: 13,
color: Colors.black.withOpacity(0.4)),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 8),
child: TextField(
controller: textFieldController,
textAlign: TextAlign.end,
textInputAction: TextInputAction.done,
keyboardType: TextInputType.number,
decoration: InputDecoration(border: InputBorder.none),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 32.5),
child: SliderTheme(
data: SliderThemeData(
activeTrackColor: Colors.red,
inactiveTrackColor: Colors.transparent,
thumbShape: SliderThumbImage(customImage),
),
child: Slider(
onChanged: (value) {},
value: 0.5,
),
),
),
],
);
}
}
class SliderThumbImage extends SliderComponentShape {
final ui.Image image;
SliderThumbImage(this.image);
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return Size(5, 5);
}
@override
void paint(PaintingContext context, Offset center,
{Animation<double> activationAnimation,
Animation<double> enableAnimation,
bool isDiscrete,
TextPainter labelPainter,
RenderBox parentBox,
SliderThemeData sliderTheme,
TextDirection textDirection,
double value}) {
var canvas = context.canvas;
canvas.drawImage(image, Offset(5, 5), new Paint());
}
}
推荐答案
我已经解决了我的问题.
I've already fixed my problem.
import 'dart:ui' as ui;
class SliderThumbImage extends SliderComponentShape {
final ui.Image image;
SliderThumbImage(this.image);
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return Size(0, 0);
}
@override
void paint(PaintingContext context, Offset center,
{Animation<double> activationAnimation,
Animation<double> enableAnimation,
bool isDiscrete,
TextPainter labelPainter,
RenderBox parentBox,
SliderThemeData sliderTheme,
TextDirection textDirection,
double value}) {
final canvas = context.canvas;
final imageWidth = image?.width ?? 10;
final imageHeight = image?.height ?? 10;
Offset imageOffset = Offset(
center.dx - (imageWidth / 2),
center.dy - (imageHeight / 2),
);
Paint paint = Paint()..filterQuality = FilterQuality.high;
if (image != null) {
canvas.drawImage(image, imageOffset, paint);
}
}
}
这篇关于Flutter:如何将缩略图添加到Slider?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文