Jetpack Compose Button,IconButton等各种Button的讲解，安卓应用开发项目

最新推荐文章于 2024-08-05 23:01:19 发布
最新推荐文章于 2024-08-05 23:01:19 发布
阅读量963 收藏 21
点赞数 24
分类专栏： 程序员 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84149592/article/details/137518280
版权

shape: Shape = MaterialTheme.shapes.small,
border: BorderStroke? = null,
colors: ButtonColors = ButtonDefaults.buttonColors(),
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
) {
…
}

  • content 是表示Button的内容。比如里面可以是一个Text

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
}
){
Text(text = stringResource(id = R.string.login))
}
}
}

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true
){
Text(text = stringResource(id = R.string.login))
}
}
}

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true,
border = BorderStroke(1.dp,color = Color.Black)
){
Text(text = stringResource(id = R.string.login))
}
}
}

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black

Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true,
border = BorderStroke(1.dp,color = borderColor),
interactionSource = interactionSource
){
Text(text = stringResource(id = R.string.login))
}
}
}

  • shape 形状 比如我们可以设置RoundedCornerShape(20)圆角20dp

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black

Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true,
border = BorderStroke(1.dp,color = borderColor),
interactionSource = interactionSource,
shape = RoundedCornerShape(20),
elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp)
){
Text(text = stringResource(id = R.string.login))
}
}
}

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black

Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true,
border = BorderStroke(1.dp,color = borderColor),
interactionSource = interactionSource,
elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp),
shape = RoundedCornerShape(20),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black)
){
Text(text = stringResource(id = R.string.login))
}
}
}

  • contentPadding 通过 PaddingValues()去设置。默认是ButtonDefaults.ContentPadding。表示内容的内边距。 PaddingValues有如下几个方法

  • PaddingValues(all) all表示上下左右都用该边距

  • PaddingValues(horizontal: Dp, vertical: Dp)

  • PaddingValues( start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)

@Preview()
@Composable
fun buttonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black

Column(modifier = Modifier.padding(10.dp,10.dp)) {
Button(
onClick = {
Toast.makeText(context,“点击了登录”,Toast.LENGTH_SHORT).show()
},
modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
enabled = true,
border = BorderStroke(1.dp,color = borderColor),
interactionSource = interactionSource,
elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp),
shape = RoundedCornerShape(20),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black),
contentPadding = ButtonDefaults.ContentPadding
// 或者是contentPadding = PaddingValues(4.dp)
){
Text(text = stringResource(id = R.string.login))
}
}
}

二：IconButton的用法

IconButton的构造方法如下

@Composable
fun IconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable () -> Unit
){
…
}

  • onClick 点击回调
  • modifier 修饰符
  • enabled 是否可用
  • content 该控件包含的内容
  • interactionSource 跟Button一样，可以根据不同状态去处理一些逻辑。比如按下时候如何，没有按下时候如何。

如下举例。比如IconButton是一个左边是+的icon，右边是文本的控件。该文本如果按下时候是显示减少，不按下显示添加。

@Preview()
@Composable
fun iconButtonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val pressText = if(pressState.value) “减少” else “添加”
Column(modifier = Modifier.padding(10.dp,10.dp)) {
IconButton(
onClick = {
Toast.makeText(context,“点击了添加”,Toast.LENGTH_SHORT).show()
},
modifier = Modifier.size(80.dp,40.dp).clip(RoundedCornerShape(20)),
enabled = true,
interactionSource = interactionSource
){
Row(verticalAlignment=Alignment.CenterVertically) {
Icon(imageVector = Icons.Filled.Add, contentDescription = “添加的按钮”,tint = Color.Red)
Text(text = pressText,fontSize = 8.sp)
}
}
}
}

三：FloatingActionButton和ExtendedFloatingActionButton的用法

FloatingActionButton是Material风格的控件，默认是浮动在右下角的圆形控件。FloatingActionButton的构造函数方法如下：

@Composable
fun FloatingActionButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
contentColor: Color = contentColorFor(backgroundColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
content: @Composable () -> Unit
){
…
}

  • onClick 点击回调
  • modifier 修饰符
  • interactionSource 跟上面一样，处理不同状态的
  • shape 形状
  • backgroundColor 背景颜色
  • contentColor内容颜色
  • elevation阴影
  • content 内容控件（其实ExtendedFloatingActionButton就是在该内容里添加了一个Row，Row里放了个文本跟Icon）

@Preview()
@Composable
fun floatingActionButtonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val pressText = if(pressState.value) “减少” else “添加”
Column(modifier = Modifier.padding(10.dp,10.dp)) {
FloatingActionButton(
onClick = {
Toast.makeText(context,“点击了按钮”,Toast.LENGTH_SHORT).show()
},
modifier = Modifier.size(80.dp),
interactionSource = interactionSource,
shape = RoundedCornerShape(25.dp),
backgroundColor = Color.Green,
contentColor = Color.Blue,
elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp)
){
Row(verticalAlignment=Alignment.CenterVertically) {
Icon(imageVector = Icons.Filled.Add, contentDescription = “Add”,tint = Color.Red)
Spacer(modifier = Modifier.width(10.dp))
Text(text = “按钮”,fontSize =12.sp,color = Color.White)
}
}
}

ExtendedFloatingActionButton是FloatingActionButton的扩展 ExtendedFloatingActionButton的构造方法如下

@Composable
fun ExtendedFloatingActionButton(
text: @Composable () -> Unit,
onClick: () -> Unit,
modifier: Modifier = Modifier,
icon: @Composable (() -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
backgroundColor: Color = MaterialTheme.colors.secondary,
contentColor: Color = contentColorFor(backgroundColor),
elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()
) {
…
}

  • text显示的文本控件
  • onClick 点击回调
  • modifier 修饰符
  • icon 显示的icon控件
  • interactionSource 跟上面一样，处理不同状态的
  • shape 形状
  • backgroundColor 背景颜色
  • contentColor内容颜色
  • elevation阴影 通过FloatingActionButtonDefaults.elevation(defaultElevation,pressedElevation)设置，第一个参数是默认阴影，第二个是按下时候的阴影

@Preview()
@Composable
fun extendedFloatingActionButtonTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val pressText = if(pressState.value) “减少” else “添加”
Column(modifier = Modifier.padding(10.dp,10.dp)) {
ExtendedFloatingActionButton(text = { Text(text = pressText,fontSize =12.sp,color = Color.White)},onClick = {
Toast.makeText(context,“点击了按钮”,Toast.LENGTH_SHORT).show()
},
// modifier = Modifier.size(50.dp),
icon ={
Icon(imageVector = Icons.Filled.Add, contentDescription = “Add”,tint = Color.Red)
},
interactionSource = interactionSource,
shape = RoundedCornerShape(25.dp),
backgroundColor = Color.Green,
contentColor = Color.Blue,
elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp))
}
}

四：IconToggleButton的用法

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

img

img

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上我搜集整理的2019-2021BATJ 面试真题解析，我把大厂面试中常被问到的技术点整理成了PDF，包知识脉络 + 诸多细节。

节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

《960全网最全Android开发笔记》

《379页Android开发面试宝典》

历时半年，我们整理了这份市面上最全面的安卓面试题解析大全
包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。

如何使用它？

1.可以通过目录索引直接翻看需要的知识点，查漏补缺。
2.五角星数表示面试问到的频率，代表重要推荐指数

《507页Android开发相关源码解析》

只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。

腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析

资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。

[外链图片转存中…(img-0Kacb378-1712570217611)]

腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析

[外链图片转存中…(img-VFXLtYqY-1712570217611)]

资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

2401_84149592
关注
  • 24
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IconButton
05-18
CButton IconButton MFC VC 自绘按钮 透明按钮 在VS2005下测试通过
Jetpack Compose入门到精通
01-29
**Jetpack Compose**是Android开发中的一个革命性框架，旨在简化UI开发，提供声明式编程方式，使得构建美观、高性能的应用程序变得更加容易。在这个**“Jetpack Compose入门到精通”**的学习过程中，我们将深入探讨...
Flutter组件之图标（Icon）和图标按钮（IconButton）
斌
06-22 1万+
图标组件（Icon）为展示图标的组件，该组件不可交互，要实现交互的图标，可以考虑使用IconButton组件。图标组件相关的组件有一下几个： IconButton：可交互的Icon。 Icons：框架自带Icon集合。 IconTheme：Icon主题。 ImageIcon：通过AssetImages或者其他图片显示Icon。 图标组件常用属性如下: 属性名 ...
IconButton组件的用法
talk_8的专栏
07-21 1583
我们在前面章回中介绍Button时介绍过IconButon，它表示带有图标的Button,我们在本章回中的介绍的IconButton是指Material3中新添加的IconButton，
WPF: IconButton
0.5 Degree
02-12 1845
 原文链接:http://www.codeproject.com/KB/WPF/WPF-IconButton.aspx 下载 WpfIconButtonDemo - 278.43 KB 介绍我看到了许多使用Expression Blend创建十分漂亮的按钮(Button)的演示视频,但是却没有找到一个是详细讲解如何从一幅图片创建按钮的.这篇文章试图填补这一空白.Ico
Flutter中常用的按钮组件-IconButton(可点击的Icon)
不二菜菜子的博客
01-31 3466
Flutter中常用的按钮组件-IconButton(可点击的Icon)
Android开源项目——设置图文居中的按钮 IconButton
weixin_34032621的博客
02-06 171
本文介绍一下一个小众的开源项目——IconButton。 本文原创，转载请注明出处： http://blog.csdn.net/maosidiaoxian/article/details/43560209 简介 这是一个老外两年前写的项目，见：https://github.com/pnc/IconButton。它可以使一个Button的图片与文字一起居...
JetpackComposePlayground:Jetpack Compose应用程序学习基础知识
03-20
在这个"JetpackComposePlayground-master"项目中，你可以找到各种示例代码，展示如何使用上述概念来创建实际的Jetpack Compose应用。通过研究这些例子，你可以更好地理解和掌握Jetpack Compose的精髓，从而在自己的...
JetQuotes：Quote用来演示Jetpack Compose UI的Quotes应用程序
02-03
这个项目的主要目的是演示如何使用Jetpack Compose来创建一个引语（Quote）应用程序，用户可以在其中浏览和分享各种引语。 ### 1. Jetpack Compose基础知识 Jetpack Compose的核心理念是声明式UI，这意味着开发者...
带有Jetpack Compose的动画暗模式切换按钮。 :rocket:-Android开发
05-26
带有Jetpack Compose的动画暗模式切换按钮。 :rocket:暗模式切换示例带有Jetpack Compose的动画暗模式切换按钮。 Demo设备演示Android桌面信用来自于：...
IconButton:一个带logo和描述的按钮
05-07
IconButton 一个带logo和描述的按钮 是一个react-native的按钮组件。
第一百七十回 Material3中的IconButton
talk_8的专栏
11-12 553
本章回中主要介绍了Material3中新提供的三种不同风格的IconButton,主要介绍了它们各自的风格特点以及使用方法，最后对本章回的内容做了全面的总结。
Icon.Button使用方法
weixin_42262889的博客
06-27 1264
参考链接：https://www.cnblogs.com/moxiaoyan33/p/5482024.html <Icon.Button //在图片后加, 自定义样式的文字 name="facebook" backgroundColor="#3b5998"> <Text style={{fontFamily: 'Ar...
jetpack compose——圆角、渐变
wy313622821的博客
12-01 1139
【代码】jetpack compose——圆角、渐变。
【Element-ui】Icon 图标与Button 按钮
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
【Material-UI】Icon Button 组件详解
最新发布
lph159的博客
08-05 1009
除了主题颜色，开发者还可以使用自定义颜色。通过sx属性或自定义样式，可以定义特定颜色的 Icon Button。Material-UI 的 Icon Button 组件提供了多种功能和定制选项，适用于不同的应用场景。通过合理使用 Icon Button，开发者可以创建更简洁、美观且功能强大的用户界面。在设计 Icon Button 时，务必考虑到无障碍性、交互反馈以及整体视觉一致性。希望通过本文的介绍，您能够更好地理解和应用 Icon Button 组件，为用户打造更加优秀的界面体验。
Android开发：Jetpack Compose Button,IconButton等各种Button的讲解
2401_84010457的博客
03-30 752
colors 设置颜色 RadioButtonDefaults.colors(selectedColor, unselectedColor,disabledColor)方法有三个参数，第一个selectedColor表示选中时候的颜色，第二个参数unselectedColor表示没有选中时候的颜色，第三个disabledColor表示不可用时候的颜色。这份体系学习笔记，适应人群：**第一，**学习知识比较碎片化，没有合理的学习路线与进阶方向。**第二，**开发几年，不知道如何进阶更进一步，比较迷茫。
Flutter 中的 IconButton 小部件：全面指南
smileKH的博客
05-15 1005
IconButton是一个带有图标的按钮小部件，它继承自，因此具有 Material Design 中按钮的所有特性。当用户点击IconButton时，可以执行一个回调函数。IconButtoncolor: Colors.blue, // 设置图标颜色// 按钮点击事件},highlightColor: Colors.lightBlueAccent, // 设置按钮高亮颜色。
Flutter Icon、ImageIcon、IconButton参数详解
热门推荐
陈英有
11-30 3万+
1.继承关系 Icon:            Object &gt; Diagnosticable &gt; DiagnosticableTree &gt; Widget &gt; StatelessWidget &gt; Icon ImageIcon:  Object &gt; Diagnosticable &gt; DiagnosticableTree &gt; Widget &gt; ...
Jetpack Compose 组件Button点击和长按同时监听代码示例
04-30
import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值