如何格式化定位的文本塊的背景顏色？

Question

我有一個定位的文本元素位於堆棧中的圖像元素的頂部。我想一個簡單的背景顏色應用到文本元素，使其幀像一個標題框中的文本：

我可以通過在棧中插入的一種容器，另一定位的孩子做到這一點。但每次文本字符串改變時，我都必須重新計算寬度，這是次優的。有沒有更好的辦法？

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

只要巢文本元素作爲子內具有BoxDecoration（即背景顏色）的容器;容器將伸展以適應內部的文本。另外，可以爲該容器指定填充，這樣就不需要對該盒子的寬度/高度進行硬編碼。

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, 
    ), 
    ] 
);