[英]How to set image in a container as a background in flutter
我想設計一個自定義組件卡,卡中附有圖像,標題部分將重疊在圖像部分上,描述將添加在圖像部分下方。 如何在 flutter 中將文字重疊在圖像上?
class CardWithImage extends StatelessWidget {
final String title, buttonText;
final String subTitle;
final String body;
final asset;
CardWithImage({
this.title,
this.subTitle,
this.body,
this.asset,
this.buttonText,
});
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: ThemeColors.primaryColor,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: ThemeColors.grey5,
blurRadius: 10,
spreadRadius: 5,
offset: Offset(3, 3),
)
],
),
child: Column(
children: <Widget>[
Image.asset(
asset,
height: 200,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
],
),
);
}
}
采用
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/background.png"), fit: BoxFit.cover)),
child:<Widget that needs to be in foreground>
......
您可以使用以下代碼實現您的願望卡。
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.png'),
fit: BoxFit.cover),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.grey.withOpacity(0.3),
height: 50,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Title",
),
),
),
),
),
Container(
padding: EdgeInsets.all(10),
child: Text(
"Your Big Text ",
textAlign: TextAlign.left,
),
)
],
),
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.