Dart 如何格式化定位文本块的背景色?

Dart 如何格式化定位文本块的背景色?,dart,flutter,Dart,Flutter,我有一个定位文本元素,它位于堆栈中图像元素的顶部。我想对该文本元素应用一个简单的背景色,以便它像标题框一样框显文本: 我可以通过在堆栈中插入一个容器作为另一个定位的子容器来实现这一点。但每次文本字符串更改时,我都必须重新计算宽度,这是次优的。有更好的办法吗 var堆栈=新堆栈( 儿童:[ 新建Image.asset(//背景照片 “assets/texture.jpg”, fit:ImageFit.cover, 高度:600.0, ), 新定位(//标题 子容器:新容器( 装饰:新盒子装饰(

我有一个定位文本元素,它位于堆栈中图像元素的顶部。我想对该文本元素应用一个简单的背景色,以便它像标题框一样框显文本:

我可以通过在堆栈中插入一个容器作为另一个定位的子容器来实现这一点。但每次文本字符串更改时,我都必须重新计算宽度,这是次优的。有更好的办法吗

var堆栈=新堆栈(
儿童:[
新建Image.asset(//背景照片
“assets/texture.jpg”,
fit:ImageFit.cover,
高度:600.0,
),
新定位(//标题
子容器:新容器(
装饰:新盒子装饰(
背景颜色:Colors.black
),
),
左:0.0,
底部:108.0,
宽度:490.0,
身高:80.0,
),
新定位(
儿童:新文本(
“Lorem ipsum dolor。”,
样式:新文本样式(
颜色:颜色。蓝色[500],
字体大小:42.0,
fontWeight:fontWeight.w900
)
),
左:16.0,
底部:128.0,
)
]
);

只需将文本元素作为子元素嵌套在具有框装饰(即背景色)的容器中即可;容器将拉伸以适合内部文本。此外,可以为该容器指定填充,这样就无需硬编码框的宽度/高度

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,
    ),
  ]
);
var堆栈=新堆栈(
儿童:[
新建Image.asset(//背景照片
“assets/texture.jpg”,
fit:ImageFit.cover,
高度:600.0,
),
新定位(//标题
子容器:新容器(
儿童:新文本(
“Lorem ipsum dolor。”,
样式:新文本样式(
颜色:颜色。蓝色[500],
字体大小:42.0,
fontWeight:fontWeight.w900
)
),
装饰:新盒子装饰(
背景颜色:Colors.black
),
填充:来自LTRB(16.0,16.0,16.0,16.0,16.0)的新边缘设置,
),
左:0.0,
底部:108.0,
),
]
);

自颤振0.10.3起已更改。backgroundColor:不再是有效的属性。现在是颜色:。

color
控制文本本身的颜色。这个问题是关于设置
文本
小部件的背景色。James谈到了更改
容器
颜色,而不是
文本
。从Flatter 1.0.0开始,您可以这样做来更改文本背景颜色:
style:TextStyle(背景:Paint()…color=color(0xFF3b9c00)),
。从这里得到这个
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,
    ),
  ]
);