网站建设 天津,自己动手制作网站,北京城建道桥建设网站,广东住房和建设局网站概述
按钮组件Button是用户和系统交互的重要组件之一#xff0c;它按照Material Design风格实现#xff0c;我们先看下Button的参数列表#xff0c;通过参数列表了解下Button的整体功能
Composable
fun Button(onClick: () - Unit, // 点击按钮时的回调modifier: Modi…概述
按钮组件Button是用户和系统交互的重要组件之一它按照Material Design风格实现我们先看下Button的参数列表通过参数列表了解下Button的整体功能
Composable
fun Button(onClick: () - Unit, // 点击按钮时的回调modifier: Modifier Modifier, // 修饰符enabled: Boolean true, // 是否启用按钮interactionSource: MutableInteractionSource remember { MutableInteractionSource() },elevation: ButtonElevation? ButtonDefaults.elevation(), // 按钮的阴影shape: Shape MaterialTheme.shapes.small, border: BorderStroke? null,colors: ButtonColors ButtonDefaults.buttonColors(),contentPadding: PaddingValues ButtonDefaults.ContentPadding,content: Composable RowScope.() - Unit
)Button组件的第一个参数onClick是必填项这是按钮组件最重要的功能通过回调响应用户的点击事件最后一个参数content也是必填项展示按钮的内容。Compose 的Button组件默认没有任何UI它仅仅是一个响应onClick的容器它的UI需要在content中通过其他组件实现
1.普通Button按钮
假设我们需要创建一个显示文字的Button代码如下 Composablefun ButtonDemo(){Button(onClick { /*TODO*/ }) {Text(text OK)}}运行结果 假如我们想在按钮文字的左边加一个图标代码如下
Composablefun ButtonIconDemo(){Button(onClick { /*TODO*/ }) {Icon(imageVector Icons.Filled.Done, contentDescription null,modifier Modifier.size(ButtonDefaults.IconSize))Spacer(modifier Modifier.size(ButtonDefaults.IconSpacing))Text(text OK)}}这样就在文字“OK”的左边加了一个打勾的图标了 运行结果 在传统的Button中有一个很好用的功能就是selector即点击按钮的时候可以自定义按钮的点击效果在Compose中当然也可以Button中的参数interactionSource就是做这个事情的。interactionSource通过以下的桑格函数获取当前组件的状态的 interactionSource.collectIsPressedAsState() 判断是否是按下状态 interactionSource.collectIsFocusedAsState()判断是否是获取焦点的状态 interactionSource.collectIsDraggedAsState()判断是否拖动 我们可以通过实例来看下如何使用interacrtionSource来实现类似传统button的selector效果代码如下 Composablefun InteractionButtonDemo(){val interact remember {MutableInteractionSource()}val pressState interact.collectIsPressedAsState()val borderColor if(pressState.value) Color.Green else Color.RedButton(onClick { /*TODO*/ },border BorderStroke(2.dp, color borderColor),interactionSource interact) {Text(text Long click)}}上面的代码实现的是按钮在通常情况下边框为红色点击的时候边框为绿色 运行结果 Button 并非唯一的可点击组件理论上任何Compose组件都可以通过Modifier.clickable修饰符制作成可点击组件而当Button被点击的时候需要额外进行一些事件响应处理比如水波纹的处理Button 的onClick在底层是通过覆盖Modifier.clickable实现的所以我们使用button时不要为Button覆盖Modifier.clickable.
2.IconButton图标按钮
IconButton组件实际上只是Button组件的简单封装它就是一个可以点击的图标它一般用于应用栏中的导航或者其他的行为我们需要在IconButton组件里面提供一个图标组件这个图标组件的尺寸一般是24x24dp,看下面的例子 Composablefun IconButtonDemo(){IconButton(onClick { /*TODO*/ }) {Icon(imageVector Icons.Filled.Favorite,contentDescription null)}}运行结果 简单例子不多讲解
3.FloatingActionButton悬浮按钮
FloatingActionButton悬浮按钮代表当前页面的主要行为它也需要我们提供一个Icon组件代码如下 Composablefun FloatButtonDemo(){FloatingActionButton(onClick { /*TODO*/ }) {Icon(imageVector Icons.Filled.ArrowBack, contentDescription null)}}运行结果 悬浮按钮其实还有一个带文字的扩展悬浮按钮ExtendedFloatingActionButton组件使用方法如下 Composablefun ExtFloatButtonDemo(){ExtendedFloatingActionButton(icon {Icon(imageVector Icons.Filled.Favorite, contentDescription null ) },text { Text(text 我喜欢的) },onClick { /*TODO*/ })}运行结果
总结
以上就是今天的内容本文主要介绍了按钮组件的使用以及图标按钮和悬浮按钮这些按钮在开发中调试和实现实际的需求都很有用建议读者多做练习。慢慢使用到自己的项目当中去
