代码之家 › 专栏 › 技术社区 › Ujang Aripin

Flutter:如何在盒子内创建图像使用borderRadius with Text装饰

dart flutter

Ujang Aripin · 技术社区 · 2 年前

我使用下面的代码,如何使图像显示在遵循borderRadius图案的盒子装饰中?

Flexible(
  child: GestureDetector(
    onTap: () {
      print("Menu 1");
    },
    child: Container(
      height: 150,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white
      ),
      child: Column(
          children: [
            Image.asset(
              "assets/images/new_images/korean_food.jpg",
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10,),
            Text(
              'Paket Korea',
              style: TextStyle(
                fontFamily: "Khand",
                fontSize: 16,
                fontWeight: FontWeight.w500,
              ),
            ),
            Text(
              'Rp 30.000',
              style: TextStyle(
                fontFamily: "Khand",
                fontSize: 14,
                color: Color.fromRGBO(2, 161, 113, 1),
                fontWeight: FontWeight.w300,
              ),
            ),
          ],
        ),
    ),
  ),
),

这就是borderRadius图像后面的设计应该是什么样子

这是我运行代码后的结果

有人能帮我解决这个问题吗?

1 回复 | 直到 2 年前

Vivek Chib 2 年前

新答案 使用 clipBehaviour 容器属性:

Container(
      margin: const EdgeInsets.all(8.0),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.green),
      child: Column(children: ...),
    )

老答案 去除 borderRadius 从容器中取出并用包裹容器 ClipRRect 小装置:

ClipRRect(
        borderRadius: BorderRadius.circular(12.0),
        child: Container(
          color: Colors.green,
          child: Column(
            children: [
              Container(
                height: 100,
                color: Colors.orange,
                alignment: Alignment.center,
                child: const Text("Image"),
              ),
              const SizedBox(height: 8),
              const Text("Title"),
              const SizedBox(height: 8),
              const Text("Price"),
              const SizedBox(height: 8),
            ],
          ),
        ),
      )

推荐文章

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

1 年前

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

1 年前

Aouiche Redouane · 修复Flutter抽屉中的物品

1 年前

melearning · 背景封面

1 年前

rawcane · 将FileEntities从Directory.list()转换为字符串时出现问题

1 年前

greenzebra · 在Dart中,我如何将算术运算符定义为变量?

1 年前

Kartik Nhm · 颤振中是否有一个“看不见”的常数式关键词?

1 年前

Pointer · 按钮隐藏TextFormField

1 年前

calin24 · 不要在同步间隙中使用BuildContext,即使我检查了context.mounted[重复]

1 年前

Anandh Krishnan · SingleChildScrollView和ListView.builder scoll在Flutter中显示在错误的位置

1 年前