如何设置图标按钮的背景颜色？

Posted 2023-02-23

【中文标题】如何设置图标按钮的背景颜色？

【英文标题】：How to set background color for an icon button?

【发布时间】：2019-03-17 13:05:44

【问题描述】：

我想为图标按钮应用背景颜色，但我没有看到明确的backgroundColor 属性。我想实现这个：

目前我能够实现到这里：

以下是目前的代码：

@override
  Widget build(BuildContext context) 

return Scaffold(
    resizeToAvoidBottomPadding: false,
    backgroundColor: Color(0xFF13212C),
    appBar: AppBar(
      title: Text('Demo'),
    ),
    drawer: appDrawer(),
    body: new Center(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
 //     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Column(
        children: <Widget>[
       //   new Flexible(
    new TextField(
        style: new TextStyle(
        color: Colors.white,
      fontSize: 16.0),
      cursorColor: Colors.green,
      decoration: new InputDecoration(

        suffixIcon: new IconButton(
            icon: new Image.asset('assets/search_icon_ivory.png'),onPressed: null),

      fillColor: Colors.black,
        contentPadding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
        filled: true,
        hintText: 'What Do You Need Help With?',
        hintStyle: new TextStyle(
          color: Colors.white
        )
    )
    )
      //    )
    ]
),

【参考方案1】：

您可以使用半径 = 文本字段的高度/2 或您喜欢的任何高度的圆形头像。

要了解文本字段规范，您可以访问material.io

所以这段代码将如下所示：

CircleAvatar(
                radius: 30,
                backgroundColor: Color(0xff94d500),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () 
                    ...
                  ,
                ),
              ),

这样你就得到了一个带有背景颜色的图标按钮。 希望对大家有帮助。

【参考方案2】：

您可以用 Container 包装 IconButton 并使用 color 属性来实现所需的输出。 愿以下示例对您有所帮助。

 suffixIcon: Container(
              color: Colors.green,
              child: new IconButton(
                  icon: new Icon(Icons.search,color: Colors.white,),onPressed: null),
            ),

【讨论】：

通过这个实现，当onPressed 不是null 时，你会有一些奇怪的动画。但仍然可以工作。

Flutter 有很多图标，在使用外部的之前总是尝试找到你想要的图标

使用普通容器时，您也无法获得所有令人敬畏的内置颤动墨水/飞溅效果。查看the flutter docs for IconButton，它已更新为包含一个示例，说明如何使用Ink 小部件在保留这些精美细节的同时设置背景颜色

【参考方案3】：

你可以通过TextButton实现它

    TextButton(
      style: TextButton.styleFrom(
        backgroundColor: colorScheme.primary,
        shape: CircleBorder(),
      ),
      child: Icon(
        MdiIcons.send,
        color: colorScheme.onPrimary,
      ),
      onPressed: () ,
    ),

输出将如下所示：

【讨论】：

最佳解决方案。

【参考方案4】：

IconButton 小部件 yet 无法做到这一点。好消息是您可以像这样用FlatButton 替换它：

suffixIcon: new FlatButton(
                      color: Colors.green,
                      disabledColor: Colors.green[100],
                      child: Icon(Icons.search)),

color 将用于onPressed 处理程序已定义，否则将以disabledColor 背景呈现。

【参考方案5】：

希望，这会让你满意

Ink(
  decoration: ShapeDecoration(
     color: Colors.red,
     shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.delivery_dining),
    onPressed: () 
    print('pressed');
    ,
  ),
),

【讨论】：

这是 IMO 的最佳解决方案

【参考方案6】：

来自官方Flutter docs：

添加填充背景

图标按钮不支持指定 背景颜色或其他背景装饰，因为通常 图标仅显示在父窗口小部件的背景之上。图标 AppBar.actions 中出现的按钮就是一个例子。

创建一个填充背景的图标按钮很容易 使用Ink 小部件。 Ink 小部件在 底层Material 以及飞溅和突出显示InkResponse 由后代小部件贡献。

Tl;dr：IconButton 不支持开箱即用的背景颜色。使用此解决方法在单击按钮时添加背景颜色和飞溅效果：

Ink(
  decoration: ShapeDecoration(
    color: Colors.blue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () ,
  ),
),

Live Demo

【讨论】：

这是现在官方推荐的在 IconButton 和 flutter docs have been updated to reflect this 上设置背景颜色的方法。这应该是最佳答案。

【参考方案7】：

IconButton 不支持这一点，最近RaisedButton 被弃用，取而代之的是ElevatedButton，它支持改变背景颜色和形状，但你不能轻易地将它变成一个完美的圆形。

所以要跳出框框思考，为什么不使用FloatingActionButton？它们也只是小部件，因此它们可以出现在屏幕上的任何位置。例如，我在视频聊天演示应用中使用 FAB 来切换摄像头。

示例代码：

FloatingActionButton(
  child: Icon(
    Icons.flip_camera_ios_outlined,
    color: Colors.white,
  ),
  onPressed: () 
    // do your thing here
  ,
)

如果您对它的默认尺寸不满意，您可以随时用SizedBox 包裹它，以更改您认为合适的宽度。

【参考方案8】：

我使用了多种颜色来展示你可以随心所欲。我说您将 IconButton 放入 Material 小部件中。这也将解决您的 Splash Color（略带透明度的灰色）。和

【参考方案9】：

如果你想提升它，你可以像这样使用 RaisedButton：

                          ConstrainedBox(
                            constraints: BoxConstraints(maxWidth: 50),
                            child: RaisedButton(
                              color: kColorLightGrey,
                              padding: EdgeInsets.symmetric(
                                vertical: 12,
                              ),
                              shape: StadiumBorder(),
                              child: Icon(Icons.refresh),
                              onPressed: () 
                              ,
                            ),
                          ),

【参考方案10】：

添加材质

Material(
color:Colors.green
child:IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () ,
  ));

【参考方案11】：

官方解决方案：

取决于official documentation of flutter about IconButton Class:

添加填充背景

图标按钮不支持指定背景颜色或其他 背景装饰，因为通常图标只是显示在 父小部件背景的顶部。出现的图标按钮 [AppBar.actions] 就是一个例子。

创建一个填充背景的图标按钮很容易 使用 [墨水] 小部件。 [Ink] 小部件在 底层 [Material] 以及飞溅和高光 [InkResponse] 由后代小部件提供。

所以代码会是这样的：

   Material(
    color: Colors.transparent,
    child: Ink(
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder(),
      ),
      child: IconButton(
        tooltip: "Some Text...",
        icon: Icon(Icons.flash_off),
        color: Colors.black,
        onPressed: () ,
      ),
    ),
  );

查看来自flutter的官方示例代码，click here ...

注意：用Material 小部件包装它的原因是因为Ink 已绘制 在底层的Material 小部件上，如果你移除它，装饰将不会出现。