Android Compose-IconButton、IconToggleButton的使用

阿巴斯甜
1,379 阅读5分钟

1、IconButton使用：

Icon Button 组件是一个专门用于显示图标并点击触发的按钮。组件内部的内容可以包含图标、图标的说明和渲染颜色。如果需要展示一个包含图标和文字的效果，建议直接使用 Button 组件，并在其 content 中组合 Icon 和 Text 这两个控件。在 IconButton 中直接添加文字可能会导致布局和显示上的问题，因为 IconButton 的内容区域主要是为图标设计的。

注意：IconButton 通常用于表示一些小按钮，例如在 TopAppBar 上的 actions。在 Material Design 设计规则中，图标按钮内部的小图标设计大小通常是 24*24 dp，整体最小的点击范围大小是 48 x 48 dp。

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
参数类型描述
onClick() -> Unit这是一个 lambda 函数，当 IconButton 被点击时会被触发。
modifierModifierModifier 用于调整组件的大小、布局、绘制和其他属性。这是一个可选参数，如果未指定，将使用默认的 Modifier。
enabledBoolean这个参数表示按钮是否可用。
colorsIconButtonColors这个参数用于定义 IconButton 的颜色方案。
interactionSourceMutableInteractionSource?这个参数用于处理用户与按钮的交互，比如点击、长按等。非必要情况下，这个参数不需要直接处理，除非开发者想实现自定义的交互逻辑。
content@Composable () -> Unit这是一个 Composable lambda 函数，用于定义 IconButton 的内容。
@Composable
fun StandardIconButtonSample() {
 
    val content = remember {
        mutableStateOf("点击前的内容")
    }
    val stateClickCount = remember {
        mutableIntStateOf(0)
    }
 
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
 
        Text(text = content.value, fontSize = 18.sp, modifier = Modifier.padding(vertical = 5.dp))
 
        IconButton(
            onClick = { content.value = "iconbutton 被点击了 ${++stateClickCount.intValue} 次"   },
            modifier = Modifier
                .background(color = Color.LightGray, shape = RoundedCornerShape(50))
                .padding(10.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ThumbUp,
                contentDescription = "ThumbUp"
            )
        }
    }
}

1111.gif

2、IconToggleButton

IconToggleButton 表示的是带有 UI 状态的图标按钮。它有两种不同的状态，并通过用户的点击来在这些状态之间切换。它与大多数 Compose 组件一样，IconToggleButton 提供了丰富的自定义选项，允许你修改其颜色、大小、形状和其他视觉属性。

图片.png

从外观上讲，IconToggleButton 的外观通常由一个可点击的区域和一个图标组成。图标的具体外观会根据其当前状态（选中或未选中）而改变。开发者可以通过提供不同的图标资源或绘制逻辑来自定义这两种状态下的图标外观。此外，按钮本身也可以有不同的背景、边框和大小等样式设置。

下面看下它的声明及参数列表。

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
参数类型描述
checkedBoolean这个参数表示按钮的当前状态，true 表示按钮被选中，false 表示未被选中。
onCheckedChange(Boolean) -> Unit这是一个 lambda 函数，当按钮的选中状态发生变化时会被调用。它接收一个 Boolean 参数，表示变化后的状态。开发者可以在这里定义状态变化时应该执行的操作。
modifierModifierModifier 参数用于应用各种视觉效果和布局调整到 IconToggleButton 上。它是一个可选参数，默认值为 Modifier，意味着如果不指定，将使用默认的修饰符。
enabledBoolean这个参数决定了按钮是否可以被用户交互。如果设置为 false，按钮将不可点击，并且通常会显示为禁用状态。默认值为 true。
colorsIconToggleButtonColors这个参数定义了按钮的颜色方案。IconToggleButtonColors 是一个对象，包含了按钮在不同状态下的颜色信息。如果不指定，将使用IconButtonDefaults.iconToggleButtonColors() 提供的默认颜色方案。
interactionSourceMutableInteractionSource?这个参数用于处理用户与按钮的交互，比如点击、触摸等。MutableInteractionSource 允许你观察并响应这些交互。它是一个可选参数，默认值为 null。在大多数情况下，你不需要直接处理这个参数，除非你想实现自定义的交互逻辑。
content@Composable () -> Unit这是一个 Composable lambda 函数，用于定义按钮的内容。通常，这里会包含一个或多个图标、文本等可视元素。在 IconToggleButton 的上下文中，通常只包含一个表示按钮状态的图标或其他视觉表示。

状态的图标按钮，基于它在两种不同的状态间切换，可以用作：

  • 1、开关控制。当在一个应用中有一个需要打开或关闭的功能，这时使用 IconToggleButton 可以清晰明了的表示功能的打开与关闭。
  • 2、工具栏或操作栏中的操作。在工具栏或操作栏中使用，表示某种可以通过点击图标来触发或切换的操作。如：一个文本编辑器有一个用于切换“粗体”或“斜体”的 IconToggleButton。
  • 3、筛选和排序。在需要筛选或排序的场景中，IconToggleButton 可以表示不同的筛选或排序选项。例如，一个电商应用有一个用于切换商品排序方式的 IconToggleButton。
@Composable
fun IconToggleButtonCheckedSample() {
 
    val stateChecked = remember {
        mutableStateOf(false)
    }
    val content = remember {
        mutableStateOf("图标 unchecked 状态")
    }
 
 
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
 
        Text(text = content.value, fontSize = 18.sp, modifier = Modifier.padding(vertical = 5.dp))
 
        IconToggleButton(
            checked=stateChecked.value,
            onCheckedChange={ checked: Boolean ->
                stateChecked.value = checked
                content.value = if (checked) "图标 checked 状态" else "图标 unchecked 状态"
            },
            modifier = Modifier
                .background(color = Color.LightGray, shape = RoundedCornerShape(50))
                .padding(10.dp)
        ) {
            Icon(
                imageVector = Icons.Rounded.ThumbUp,
                contentDescription = "ThumbUp"
            )
        }
    }
}

2222.gif

3、Icon Buttons 分组分类

与 IconButton 类似的不带状态的图标按钮有： FilledIconButton FilledTonalIconButton OutlinedIconButton 。FilledTonalIconButton 突显效果介于FilledIconButton与 OutlinedIconButton 之间，渲染的样式如下。

6ff87df6ba0ca4e2fb7e0905652b4ef.png

与 IconToggleButton 类似的有状态的图标按钮有：FilledIconToggleButton FilledTonalIconToggleButton OutlinedIconToggleButton。它们渲染后不同状态的样式如下。

733f6dd479bf32e6535c208a053661a.png

总的来说，Button 和 IconButton 在 Android Compose UI 库中都是重要的组件，它们各自适用于不同的场景和需求。开发者可以根据具体的应用场景和用户需求选择合适的组件来构建直观、易用的 Android 应用界面。

avatar
文章
阅读
粉丝