Làm cách nào để định dạng màu nền cho một khối văn bản được định vị?

Question

Tôi có phần tử Văn bản được định vị nằm trên phần tử Hình ảnh trong Ngăn xếp. Tôi muốn áp dụng một màu nền đơn giản với yếu tố văn bản, để nó khung văn bản giống như một hộp chú thích:

tôi có thể làm điều này bằng cách chèn một container như một đứa trẻ khác vị trí trong Stack rằng . Nhưng tôi sẽ phải tính toán lại chiều rộng mỗi lần chuỗi văn bản thay đổi, điều này là phụ tối ưu. Có cách nào tốt hơn?

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

Chỉ cần tổ phần tử văn bản như một đứa trẻ trong vòng các container mà có BoxDecoration (ví dụ màu nền); Vùng chứa sẽ kéo dài để vừa với Văn bản bên trong. Ngoài ra, người ta có thể chỉ định padding cho Container đó, loại bỏ sự cần thiết phải hardcode một chiều rộng/chiều cao cho hộp.

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