如何将图标放在容器的一角? (只需获取图标)
How can I put an icon in the corner of a container ? (just get the icon)
例子:
现实:
我希望该图标是一种“状态”类型的标签,但是使用 Positioned 它不会让我把它一直放在左边。
有什么方法可以得到想要的结果或者有什么其他的解决办法吗?
return ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 50, //exemple
minWidth: 100, //exemple
),
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
),
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Transform.rotate(
angle: -45 * pi / 180,
child: Icon(
Icons.arrow_drop_up,
size: 30,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"0001",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
],
),
),
);
我更改了 left
和 top
数字,图标转到了左上角:
Positioned(
left: -12,
top: -13,
child: ...
),
结果图片:
你做的是对的,但是Icon
周围有一些额外的空间,绿色分配图标的大小。
这就是为什么您需要在 left
和 Positioned
小部件上使用基于 iconSize
和 top
的负值。
会的。
Positioned(
left: -((12 * iconSize) / 30),
top: -((13 * iconSize) / 30),
child: Transform.rotate(
angle: -45 * pi / 180,
child: Icon(
Icons.arrow_drop_up,
size: iconSize,
),
),
),
感谢@Amir 的价值,我正在回答这个问题以获得响应视图。
例子:
现实:
我希望该图标是一种“状态”类型的标签,但是使用 Positioned 它不会让我把它一直放在左边。
有什么方法可以得到想要的结果或者有什么其他的解决办法吗?
return ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 50, //exemple
minWidth: 100, //exemple
),
child: Container(
decoration: BoxDecoration(
color: Colors.orange,
),
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Transform.rotate(
angle: -45 * pi / 180,
child: Icon(
Icons.arrow_drop_up,
size: 30,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"0001",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
],
),
),
);
我更改了 left
和 top
数字,图标转到了左上角:
Positioned(
left: -12,
top: -13,
child: ...
),
结果图片:
你做的是对的,但是Icon
周围有一些额外的空间,绿色分配图标的大小。
这就是为什么您需要在 left
和 Positioned
小部件上使用基于 iconSize
和 top
的负值。
会的。
Positioned(
left: -((12 * iconSize) / 30),
top: -((13 * iconSize) / 30),
child: Transform.rotate(
angle: -45 * pi / 180,
child: Icon(
Icons.arrow_drop_up,
size: iconSize,
),
),
),
感谢@Amir 的价值,我正在回答这个问题以获得响应视图。