在颤振堆栈中正确对齐图像

Question

child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),

Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),
],
),

我有一个按钮，应该在屏幕的中心。位于按钮中心的文本和一个向右箭头。由于我想要中间的按钮，所以我把对齐中心，所以右箭头作为中心。谁能帮我解决这个问题？我还想知道我们在哪里点击这个按钮。

Answer 1

您可以使用简单的行小部件来实现预期的 UI。 看看下面的代码，它可能对你有帮助。

Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.red
,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("vdsv",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
Visibility(
visible: true,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/images/logo.png"),
size: 30,
color: Colors.white,
)),
),
],
),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
],
)

Answer 2

在可见性之前添加对齐方式

child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),

Align(alignment: Alignment.topRight,
child: Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),)
],
),