Question

我有一个小部件，允许用户拖动比例尺以选择一个值，类似于基本的Slider小部件，但“反转”，即值滑块的位置是固定的，您可以在后台移动比例尺以调整值。
比例应该是无限的/无限的，我想我可以使用一个小图像+ 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的宽度显然很宽，如绿色背景色所示，但是变换后的图像只能缩放到初始屏幕宽度，而不会超出初始范围。有没有一种方法可以解决此问题，而无需使用巨大的图像文件？

Answer 1

那实际上是错误的。 repeat: ImageRepeat.repeatX确实填充了父级，而不是屏幕。

问题在于，即使您用5000.0的with定义了父对象，它实际上并没有该宽度。 Column为其子级添加了最大宽度约束。

您需要添加一个中间的窗口小部件，该窗口小部件的内部尺寸可能更大。这可以是OverflowBox或SingleChildScrolLView，甚至是ConstrainedBox。

颤振-图像重复仅缩放到屏幕尺寸，而不是父尺寸

1 个答案: