Question

我想将以下容器添加到ListView，但容器不会将要添加的图像的大小作为装饰。如果我将图像添加为容器的子项，它可以正常工作，但我也希望在图像的顶部显示文本。

var imageListView = new List<Container>();
var container1 = new Container(
  margin: EdgeInsets.all(8.0),
  alignment: Alignment.bottomLeft,
  child: new Text('Order of The Day',
      style: new TextStyle(
          fontFamily: 'CallingAngelsPersonalUse',
          fontSize: 20.0,
          color: Colors.white
      ),
  ),
  decoration: new BoxDecoration(
    image: new DecorationImage(
      image: new AssetImage('assets/SVSunset.jpg'),
      fit: BoxFit.cover,
    ),
  ),
);

将容器添加到ListView，然后显示如下：

imageListView.add(container1);

new ListView(children: imageListView)

任何人都能看到我错过的东西吗？

Answer 1

我设法通过将所有内容放入堆栈并定位文本来解决此问题，如下所示：

var container1 = new Container(
  margin: EdgeInsets.all(8.0),
  child: new Stack(
    children: <Widget>[
      new Image(image: new AssetImage('assets/SVSunset.jpg')),
      new Positioned(
        left: 8.0,
        bottom: 8.0,
        child: new Text('Order of the day',
          style: new TextStyle(
              fontFamily: 'CallingAngelsPersonalUse',
              fontSize: 30.0,
              color: Colors.white
          ),
        ),
      )
    ],
  ),
);

Answer 2

Container小部件大小（它的宽度和高度）等于它的子小部件。您的Text Container孩子不够大，无法创建Container，其中可以包含完整尺寸的背景图片......

您可以像Container这样添加宽度和高度：

Container(
  width: 55.0
  height: 60.0
  child:...
  ...
)

您还可以通过以下方式获取屏幕宽度：MediaQuery.of(context).size.width

Answer 3

对于flutter版本1.22.1，您可以像这样使用scale参数：

Container(
            width: 50.0,
            height: 50.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                scale: 1.5,
                image: AssetImage('flutter_icon.png'),
              ),
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              color: Colors.white,
            ),
          ),

没有采用BoxDecoration图像大小的容器

3 个答案: