Question

我有一个定位的Text元素，它位于Stack中的Image元素之上。我想将一个简单的背景颜色应用于该Text元素，以便它像文本框一样构造文本：

我可以通过在该堆栈中插入一个Container作为另一个定位子项来完成此操作。但是每次文本字符串更改时我都必须重新计算宽度，这是次优的。还有更好的方法吗？

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
      ),
      left: 0.0,
      bottom: 108.0,
      width: 490.0,
      height: 80.0,
    ),
    new Positioned (
      child: new Text (
        "Lorem ipsum dolor.",
        style: new TextStyle(
          color: Colors.blue[500],
          fontSize: 42.0,
          fontWeight: FontWeight.w900
        )
      ),
      left: 16.0,
      bottom: 128.0,
    )
  ]
);

Answer 1

将Text元素作为子嵌套在具有BoxDecoration的容器（即背景颜色）中;容器将拉伸以适应文本内部。另外，可以为该Container指定填充，这消除了对盒子的宽度/高度进行硬编码的需要。

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        child: new Text (
          "Lorem ipsum dolor.",
          style: new TextStyle(
            color: Colors.blue[500],
            fontSize: 42.0,
            fontWeight: FontWeight.w900
          )
        ),
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
        padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
      ),
      left: 0.0,
      bottom: 108.0,
    ),
  ]
);

Answer 2

从Flutter 0.10.3起更改了BoxDecoration。 backgroundColor：不再是有效的属性。现在是颜色：。

如何设置定位文本块的背景颜色？

2 个答案: