我有一个小部件,允许用户拖动刻度来选择一个值,类似于基本的 Slider 小部件,但“倒”i.e。值滑块位置是固定的,您可以在背景中移动比例以调整值。
比例应该是无限的/无限的,我想我可以使用一个小图像ImageRepeat.repeatX
。但它似乎只能扩展到最初可见的屏幕,而不是实际的父宽度。
有没有办法强制它填充整个父级宽度或translate
后更新?
最小的例子:
import 'package:flutter/material.dart';
class SliderTest extends StatefulWidget {
@override
_SliderTestState createState() => _SliderTestState();
}
class _SliderTestState extends State<SliderTest> {
double foo = 100.0;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('SliderTest'),
),
body: new Builder(builder: (context) {
return new Center(
child: new Column(
children: <Widget>[
new Text("$foo"),
new GestureDetector(
onHorizontalDragUpdate: (v) { setState(() { foo += v.primaryDelta; }); },
child: new Container(
width: 5000.0,
height: 80.0,
color: Colors.green,
child: new Transform.translate(
offset: new Offset(foo, 0.0),
child: new Image.network('http://4d94o75ofvdkz8tr3396n8cn.wpengine.netdna-cdn.com/wp-content/uploads/Scale_4x.jpg', repeat: ImageRepeat.repeatX,)
)
)
)
],
),
);
})
);
}
}
如绿色背景颜色所示,父Container
显然足够宽,但是变换后的图像仅缩放到初始屏幕宽度而不是超出。有没有办法解决这个问题而不使用巨大的图像文件?
1 回答
这实际上是错误的。
repeat: ImageRepeat.repeatX
填充父级,而不是屏幕。问题是,即使您使用
5000.0
的 with 定义了父级,它实际上也没有那个宽度。当Column
为其子项添加最大宽度约束时。你需要的是添加一个内部可能更大的 in-between 小部件。这可以是
OverflowBox
或SingleChildScrolLView
,甚至是ConstrainedBox
。