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

推荐答案

没有必要使用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)值更大来增加高度/宽度

Flutter相关问答推荐

Build.gradle专线:2个Flutter Flutter

我有一个问题:类型';()=>;Null';不是类型转换中类型';(Int)=>;void';的子类型

如何防止onTapCancel由子元素触发?

如何知道当前屏幕是否处于抖动状态?

Flutter API请求BadState响应

如何删除使用isscllable时出现的左边距?

在VSCode中运行应用程序而不进行调试时,控制台仍显示为调试模式

Flutter 中的 setState() 内部是如何工作的?

使用 flutter_svg 在 flutter 中的 Canvas 上绘制 SVG 图像

在 Flutter 中使用条件语句设置 ImageProvider Object 类型的背景图像

如何拥有 StreamProvider 的多个侦听器,其中稍后添加的侦听器接收最新数据?

通过在父窗口小部件功能上设置状态来浏览屏幕

如何对齐卡片小部件中的图标按钮?

如何从 showModalBottomSheet 中的 topRight 和 topLeft 移除平边

单元测试中如何比较NaN和NaN是否相等

.info/connected 这两个代码之间有什么区别吗?

gridview 的所有按钮都应该在Flutter 中适合其父容器

Flutter:滚动一个ListWheelScrollView,无法获取选中项的状态

Flutter - 检测手指何时进入容器

如何做到这一点,当我们在 textified 中输入 ab 然后将 applebanana 显示为一个单词?飘飘然