flutter 集装箱堆放和定位时的高度问题

ctrmrzij  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(125)

在下面的代码中,当我需要容器的底部边界与一些颜色,同时我需要边界半径,所以它不可能在同一个容器,所以我计划这样做,就像在下面的代码,问题是我的第二个容器里面的定位也停留在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;
    }
  }
}
yftpprvb

yftpprvb1#

没有必要使用Stack()Positioned()小部件来实现您正在寻找的设计。你可以通过在底部添加另一个boxShadow和不模糊的简单方法来做到这一点。

Container(
  padding: const EdgeInsets.all(12),
  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),
      ),
      BoxShadow(
        offset: Offset(0, 2),
        blurRadius: 0,
        color: colorForItem(type),
      ),],),
),

注意boxShadow的属性需要一个list。因此,您可以添加任意数量的BoxShadow,并通过增加偏移量(x,y)来增加高度/宽度

相关问题