在下面的代码中,当我需要容器的底部边界与一些颜色,同时我需要边界半径,所以它不可能在同一个容器,所以我计划这样做,就像在下面的代码,问题是我的第二个容器里面的定位也停留在10的高度相同的时间第二个容器(第二个容器的动态内容不会指定高度)这意味着第一个容器的边界高度,有人能帮我吗?
我就是这样得到的:
这就是我想要的:
class NotificationItemWidget extends StatelessWidget {
final String imageUrl;
final int seen;
final String message;
final String displayTime;
final int notificationId;
final NotificationType type;
const NotificationItemWidget(
{super.key,
required this.imageUrl,
required this.message,
required this.type,
required this.displayTime,
required this.notificationId,
required this.seen});
@override
Widget build(BuildContext context) {
NotificationListViewModel viewModel =
Provider.of<NotificationListViewModel>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
viewModel.navigateToRespectiveNotificationScreen(
notificationId, type);
},
child: Stack(
children: [
Container(
height: 10,
decoration: BoxDecoration(
color: colorForItem(type),
borderRadius: BorderRadius.circular(8)),
),
Positioned(
bottom: 1,
left: -1,
right: -1,
child: Container(
padding: const EdgeInsets.all(12),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: const [
BoxShadow(
offset: Offset(0, -1),
blurRadius: 4,
color: Color.fromRGBO(0, 0, 0, 0.25),
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: colorForItem(type), shape: BoxShape.circle),
child: Padding(
padding: const EdgeInsets.all(6),
child: Image.network(
imageUrl,
width: 20,
height: 20,
alignment: Alignment.center,
fit: BoxFit.contain,
),
),
),
const SizedBox(width: 12),
Expanded(
child: Text(message,
style: Theme.of(context)
.textTheme
.headlineMedium
?.copyWith(
fontWeight: FontWeight.w600,
fontSize: 14,
color: seen == 0
? ColorsManager.blackColor
: ColorsManager.textGray)))
],
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 6, top: 6),
child: Text(displayTime,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.w500,
fontSize: 10,
color: ColorsManager.textGray)),
),
const SizedBox(height: 20)
],
);
}
Color colorForItem(NotificationType type) {
switch (type) {
case NotificationType.appointmentStatusApproved:
return ColorsManager.parrotGreen;
case NotificationType.appointmentStatusDeclined:
return ColorsManager.russianRed;
default:
return ColorsManager.primaryVariant;
}
}
}
1条答案
按热度按时间yftpprvb1#
没有必要使用
Stack()
和Positioned()
小部件来实现您正在寻找的设计。你可以通过在底部添加另一个boxShadow和不模糊的简单方法来做到这一点。注意
boxShadow
的属性需要一个list
。因此,您可以添加任意数量的BoxShadow
,并通过增加偏移量(x,y)来增加高度/宽度