Row的位置问题

Question

我正在为应用程序构建一个小部件。我有一个问题，设置一排的位置。

图像

我不知道如何设置两个图标按钮的位置，黑色矩形在哪里。我尝试使用main/crossAxisAlignment，但只获得了行从中心向右移动的结果。这是我的代码：

class CustomCardDetail extends StatelessWidget {
CustomCardDetail({
this.containerHeight,
this.containerWidth,
@required this.image,
this.backgroundColor,
this.colorTitle,
@required this.title,
this.titleFontSize,
this.titleFontFamily,
this.titleFontWeight,
@required this.content,
this.contentColor,
this.contentFontSize,
this.contentFontFamily,
this.contentFontWeight,
@required this.onPressedFavoriteButton,
@required this.onPressedShareButton,
});
final double containerHeight, containerWidth, titleFontSize, contentFontSize;
final String image, title, titleFontFamily, content, contentFontFamily;
final Color backgroundColor, colorTitle, contentColor;
final FontWeight titleFontWeight, contentFontWeight;
final Function onPressedFavoriteButton, onPressedShareButton;
@override
Widget build(BuildContext context) {
return Container(
height: containerHeight,
width: containerWidth,
color: backgroundColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Image(
image: AssetImage(image),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Container(
color: Colors.red,
height: 170,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
title == null ? 'TITLE' : title,
style: TextStyle(
color: colorTitle,
fontSize: titleFontSize,
fontFamily: titleFontFamily,
fontWeight: titleFontWeight,
),
),
Padding(
padding: EdgeInsets.only(top: 15.0),
child: Text(
content == null ? 'CONTENT' : content,
style: TextStyle(
color: contentColor,
fontSize: contentFontSize,
fontFamily: contentFontFamily,
fontWeight: contentFontWeight,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.favorite_border,
color: Colors.white,
),
onPressed: onPressedFavoriteButton,
),
IconButton(
icon: Icon(
Icons.share_rounded,
color: Colors.white,
),
onPressed: onPressedShareButton,
),
],
),
],
),
),
),
],
),
);
}
}

谢谢你的帮助。

Answer 1

在填充和行之间添加间隔符

Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Image(
image: AssetImage(image),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Container(
color: Colors.red,
height: 170,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
title == null ? 'TITLE' : title,
style: TextStyle(
color: colorTitle,
fontSize: titleFontSize,
fontFamily: titleFontFamily,
fontWeight: titleFontWeight,
),
),
Padding(
padding: EdgeInsets.only(top: 15.0),
child: Text(
content == null ? 'CONTENT' : content,
style: TextStyle(
color: contentColor,
fontSize: contentFontSize,
fontFamily: contentFontFamily,
fontWeight: contentFontWeight,
),
),
),
Spacer(), ////////// add spacer
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.favorite_border,
color: Colors.white,
),
onPressed: onPressedFavoriteButton,
),
IconButton(
icon: Icon(
Icons.share_rounded,
color: Colors.white,
),
onPressed: onPressedShareButton,
),
],
),
],
),
),
),