在Container的右下方放置一个图标

Question

我有一个小部件来创建一个圆形容器。我想把图标放在正确的按键,所以我试着用定位放置它,我想要但不动。它固定在容器的中心

Widget buildImage() {
return Center(
child: Container(
child: Material(
child: InkWell(
customBorder:  CircleBorder(),
onTap: (){},
child: Container(
width: 150.0,
height: 150.0,
child:  Positioned(
bottom: 4,
right: 0,
child: Icon (Icons.account_circle_rounded),
),
),
),
color: Colors.transparent,
),
decoration:  BoxDecoration(
color: Colors.orange,
shape: BoxShape.circle,
),
),
);
}

我在这里做错了什么?

非常感谢您的回答。

Answer 1

定位仅用于堆栈小部件。所以，如果你想在容器中定位你的图标，你可以使用Align小部件，withPadding，这将创建之前在定位中指定的预期行为。像这样:

...    
Container(
width: 150.0,
height: 150.0,
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 4.0),
child: Icon(
Icons.account_circle_rounded,
),
),
),
),
...

Answer 2

容器有align属性你可以使用这个属性或者你可以使用align Widget来对齐你的Widget

Answer 3

对于位置的更多控制，只需更改填充值。

Center(
child: Container(
child: Material(
child: InkWell(
customBorder: CircleBorder(),
onTap: () {},
child: Container(
width: 150.0,
height: 150.0,
child: Container(
padding: EdgeInsets.only(
right: 20, bottom: 10),
alignment: Alignment.bottomRight,
child: Icon(
Icons.account_circle_rounded),
),
),
),
color: Colors.transparent,
),
decoration: BoxDecoration(
color: Colors.orange,
shape: BoxShape.circle,
),
),
),