flutter - Flutter 容器在背景图像上写入文本
问题描述
我想做一个像下面这样的设计
我用背景图像构建基本布局。以下是实现这一目标的代码。现在我想把“杂货店”文本放在这张图片和其他小部件的顶部。我怎样才能做到这一点 ?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}
解决方案
Stack
/Align
是你的朋友。
看看这里https://api.flutter.dev/flutter/widgets/Stack-class.html
这是一个基本示例(基于您的代码):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}
推荐阅读
- c++ - 如何在给出前两个数字的级数中找到大于 x 的第 n 个最小子数组和?
- c++ - 从矩阵中删除一行的分段错误
- bash - 如何从 Ansible-playbook 的 bash-script 启动后台循环
- angular - 未捕获(承诺):TypeError:无法读取未定义的属性“包含”
- python - 从有向图网络中删除可逆边
- java - Javafx Tooltip 过大时会闪烁
- php - 如何将 html 表单中的数组发送到 php
- php - 从文本框中的下拉列表中获取选定的选项
- windows - 如何创建一个 DOSKEY 别名命令以在新行上的每个条目打印 Windows %PATH%?
- c# - C# Windows Universal:无法将项目动态添加到 DataGrid