我想创建一个四舍五入的ElevatedButton与图像背景封面如下:

enter image description here

现在我的ElevatedButton分显示了这个结果:

enter image description here

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
      child: Image.network('url...', fit: BoxFit.cover),
    )

有没有人能给我举个例子,说明如何把背景图像加到一个四舍五入的ElevatedButton上?

推荐答案

像这样使用clipBehaviorpadding:

SizedBox(
    height: 100,
    child: ElevatedButton(
        onPressed: () {},
        clipBehavior: Clip.antiAlias,// <--add this
        style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0), // <--add this
            ),
            padding: EdgeInsets.zero, // <--add this
        ),         
        child: Image.network('url...', fit: BoxFit.cover),
    ),
),

enter image description here

Flutter相关问答推荐

底部导航栏项目在抖动中不更改 colored颜色

为什么Flutter InAppWebView中的DatePicker看起来很旧?

在创建肘部并使用冻结时,无法使用中的Copy With方法

如何在Ffltter 3.16中设置标准的提升按钮主题?

不要跨同步间隔使用BuildContext

当我转到其他屏幕并按下后退按钮时,屏幕将不会刷新

Flutter 需要 Xcode 14 或更高版本

构建上下文不能跨异步间隙使用

如何使Flutter 边框宽度在外面而不是在里面?

在允许屏幕 Select 和点击的同时保持通用对话框显示

小部件堆栈未显示顶层

如何使这种相机叠加在Flutter 中?

Flutter:为什么我的 listTile colored颜色 被容器 colored颜色 覆盖了?

为什么 setState 不改变我的变量 Flutter?

如何在 flutter 中更改日期 Select 器 colored颜色 ?

Flutter 用户过滤器

Flutter:整个判断整个应用生命周期的通用类

将容器扩展到安全区域 - Flutter

Flutter - 使用操作复制小部件

弯曲的导航栏在受尊重的区域之外绘制