我有一个卡片小部件,它包含一些对齐方式。居中和左下对齐有效,但我也想在
topRight
上显示一些内容,它一直粘在左侧。
我的卡的代码.dart
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RecipeDetailPage(
recipeName: recipeName,
estTimeMin: estTimeMin,
availableIngredients: availableIngredients,
missingIngredients: missingIngredients,
instructions: instructions,
thumbnailUrl: thumbnailUrl,
),
));
},
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
width: MediaQuery.of(context).size.width,
height: 180,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.6),
offset: const Offset(
0.0,
10.0,
),
blurRadius: 10.0,
spreadRadius: -6.0,
),
],
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.35),
BlendMode.multiply,
),
image: NetworkImage(thumbnailUrl),
fit: BoxFit.cover,
),
),
child: Stack(
children: [
Align(
alignment: Alignment.topRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blueGrey.shade800,
borderRadius: BorderRadius.circular(15),
),
child: const Row(
children: [
Icon(
Icons.bubble_chart,
color: Colors.white,
size: 18,
),
SizedBox(width: 7),
Text(
"LLM: \$placeholder",
style: TextStyle(
color: Colors.white,
),
),
],
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 5.0,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(10),
),
child: Text(
recipeName,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
const Icon(
Icons.schedule,
color: Colors.blue,
size: 18,
),
const SizedBox(width: 7),
Text("$estTimeMin mins"),
],
),
)
],
),
),
],
),
),
);
}
行上的默认
mainAxisSize
为 max
。您可以设置为mainAxisSize: MainAxisSize.min
。
InkWell(
onTap: () {},
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
width: MediaQuery.of(context).size.width,
height: 180,
color: Colors.blueGrey.shade800,
child: Stack(
children: [
Align(
alignment: Alignment.topRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blueGrey.shade800,
borderRadius: BorderRadius.circular(15),
),
child: const Row(
children: [
Icon(
Icons.bubble_chart,
color: Colors.white,
size: 18,
),
SizedBox(width: 7),
Text(
"LLM: \$placeholder",
style: TextStyle(
color: Colors.white,
),
),
],
),
)
],
),
),
Align(
alignment: Alignment.center,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 5.0,
),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(10),
),
child: Text(
"recipeName",
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
),
child: Row(
children: [
const Icon(
Icons.schedule,
color: Colors.blue,
size: 18,
),
const SizedBox(width: 7),
Text("estTimeMin mins"),
],
),
)
],
),
),
],
),
),
)