颤振-图像重复仅缩放到屏幕尺寸，而不缩放到父尺寸 [英] Flutter - Image repeat only scales to screen size, not parent size

问题描述

我有一个小部件，允许用户拖动比例尺以选择一个值，类似于基本的Slider小部件，但反转"，即值滑块的位置是固定的，您可以在后台移动比例尺以调整值.
比例尺应该是无限的/无限的，我想我可以使用一个小图像+ ImageRepeat.repeatX来实现.但这似乎只能缩放到最初可见的屏幕，而不是实际的父宽度.

I have a widget that allows the user to drag a scale to select a value, similar to the basic Slider widget but "inverted" i.e. the value sliders position is fixed and you move the scale in the background to adjust the value.
The scale should be unbounded / infinite and I thought I could use a small image + ImageRepeat.repeatX for that. But it seems this only scales to the initially visible screen, not to the actual parent width.

是否有一种方法可以强制它填满整个父对象宽度或在translate之后更新?

Is there a way to force it to fill the entire parents width or update after a 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显然足够宽(如绿色背景色所示)，但是变换后的图像仅缩放到初始屏幕宽度，而不会超出初始屏幕宽度. 有没有一种方法可以解决此问题，而无需使用巨大的图像文件?

The parent Container is clearly wide enough as seen by the green background color, but the transformed image only scales to the initial screen width and not beyond. Is there a way to fix that without using a huge image file?

推荐答案

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

That is actually wrong. repeat: ImageRepeat.repeatX do fill the parent, not the screen.

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

The problem is that even although you defined your parent with a with of 5000.0, it doesn't actually have that width. As Column adds a maximum width constraint to its children.

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

What you need is to add an in-between widget that can be bigger on the inside. This can be an OverflowBox or a SingleChildScrolLView, even a ConstrainedBox.

这篇关于颤振-图像重复仅缩放到屏幕尺寸，而不缩放到父尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！