带图像封面的 ElevatedButton答案

【问题标题】：Flutter ElevatedButton with Image cover带图像封面的 ElevatedButton
【发布时间】：2022-10-08 02:53:34
【问题描述】：

我想创建一个带有图像背景封面的圆形ElevatedButton，如下所示：

现在我的ElevatedButton 显示结果：

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

有人可以给我一个如何将背景图像添加到圆形ElevatedButton 的示例吗？

【问题讨论】：

你试过剪裁吗？
剪切图像没有帮助，因为 ElevatedButton 不适合其子项。从我的示例中可以看出，还尝试 Image BoxFit.cover 不完全适合 ElevatedButton ：/

标签： flutter dart flutter-layout

【解决方案1】：

像这样使用clipBehavior 和padding：

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),
    ),
),

【讨论】：

你能看看这个问题：stackoverflow.com/questions/73923353/…。我希望你能帮我解决我的问题

【解决方案2】：

您不能在 ElevatedButton 中使用图像，但可以使用图标按钮和容器为图像颤抖……

IconButton(
  icon: Image.asset('path/the_image.png'),
  iconSize: 50,
  onPressed: () {},
)

和

Container(child: ConstrainedBox(
constraints: BoxConstraints.expand(),
child: FlatButton(
         onPressed: null,
         padding: EdgeInsets.all(0.0),
         child: Image.asset('path/the_image.png'))))

【讨论】：

嘿 @EhtiXham 感谢您的回复，欢迎来到 StackOverflow 社区。 IconButton、InkWell 和 Gesture 不像 ElevatedButton 那样行动（也不是让它们行动那么简单）。我想知道在 ElevatedButton 的上下文中是否有一个可行的解决方案。

【解决方案3】：

您可以使用高架按钮。

通过在ElevatedButton.styleFrom 填充参数中设置填充，确保从父Elevated button 中删除所有填充；应用全为零的新材料状态边缘插图

MaterialStateProperty.all(EdgeInsets.zero)

将Stack.fit 设置为StackFit.streched 用Center 小部件包装Icon。

将背景图像frameBuilder 设置为将const StadiumBorder() 应用于图像的包装器：Decorated box
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
     shape: const StadiumBorder(),
     padding: MaterialStateProperty.all(EdgeInsets.zero)
  ),
  child: Stack(
  alignment: Alignment.center,
  children: [
      Image.network(
        'url...', 
        fit: BoxFit.cover
        frameBuilder: (c, child, frame, sync) {
          return DecoratedBox(
            ...,
            shape: const StadiumBorder(),
            child: child
          )
        }
      ),
      const Icon(Icons.play_arrow, color: Colors.white)
    ],
  )
)
现在这应该做...

查看r-css：易于使用的颤振模板。 Pub.dev 上提供的软件包

【讨论】：

【解决方案4】：

我找不到任何方法使ElevatedButton 的背景成为图像（也许有人可以找到它）。尝试制作一个自制带有多个小部件的按钮，即GestureDetector、SizedBox、Card 和Container。

试试下面的代码：

GestureDetector(
  onTap: () {},
  child: SizedBox(
    height: 150,
    width: 250,
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          image: const DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(
              'url...',
            ),
          ),
        ),
      ),
    ),
  ),
),

【讨论】：

【解决方案5】：

在图像或文本后面添加按钮以导航屏幕的更好方法是关闭 GestureDetector 内的小部件及其属性 onTap。通过这种方式，您可以在所有内容后面添加链接，包括图像、文本、容器、列、图标等

GestureDectector( 
     onTap: (){}
child: Image(
    image: AssetImage("")
  )
)

【讨论】：