和以往我们使用的按钮不一样,这里的按钮可以看做是一个布局控件,我们需要设置文字也就是往里面添加一个Text组件,这就是compose和传统Android的xml的不同之处由上面这点,所以我们在代码层面就十分灵活,可以实现各种效果(如带有图标的按钮),下面来个例子Button(onClick = { println("点击了按钮")}){ Icon(Icons....
如上,ComposeInfo中持有各种元素的位置信息,运算符重载用于跟随Animation计算当前最新值。 定义不同天气的ComposeInfo如下: //晴天 val SunnyComposeInfo = ComposeInfo( sun = IconInfo(1f), cloud = IconInfo(0.8f, Offset(-0.1f, 0.1f), 0f), rains = IconInfo(0.4f, Offset(0.225f, 0.3f), 0f), ...
Compose内置了几十个常用的图标,Icons里面定了5种MaterialDesign类型风格Outlined、Filled、Sharp、TwoTone、Rounded,可以根据自己的需要选择不同的类型。 下例我们引用官方提供的矢量图资源来显示五种类型Icon: Row{Icon(Icons.Outlined.CheckCircle,contentDescription=null,tint=Color.Red)Icon(Icons.Filled.CheckCircle,co...
此外,如果在实际中就是使用的MaterialTheme中的色值来设置,那么需要注意的是,Compose 默认的可组合项中常见的情况是在浅色模式中将容器设为primary色值,在暗夜模式中将其设为surface色值,许多组件默认都是使用这种模式,例如TopAppBar(应用栏) 和BottomNavigation(底部导航栏)。 2. 文案样式 文案样式也可以复用MaterialTh...
布局主要包括:布局基础知识、Material组件和布局、自定义布局、Compose中使用ConstraintLayout。 image.png 本文重点讲解Material组件和布局。 主要涉及:Material中常用组件和Material布局。如下图: 本文涉及主要知识点 Material中常用组件 常用组件包括:按钮、文字 Text、输入框、图标 Icon、分割线 Divider、复选框 CheckBox、...
首先,由于它的界面是用 Compose 写的,所以我要把setContentView()删掉,换成 Compose 专用的setContent {}: setContentView(R.layout.activity_main) ... setContent { } 然后就可以写内容了。 鉴于这是个上下结构的分栏布局,所以二话不说,我先把底部的导航条给做了。用一个Row()来做横向布局,里面用 4 ...
// Compose工具包,用于将原生android和Compose连接 implementation("androidx.activity:activity-compose:1.7.2") // 支持Compose的material design库,包含ui样式,icon,动画等 implementation("androidx.compose.material3:material3") // Compose基础库,包含compose编译器,运行...
在Jetpack Compose中,你可以使用Modifier.fillMaxHeight()和Modifier.weight()来按高度缩放图标的宽度。以下是一个简单的示例: 代码语言:txt 复制 import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modi...
1. Compose 布局方式 Android 目前的布局 Layout 有许多:LinearLayout 线性布局、RelativeLayout 相对布局、ConstraintLayout 约束布局、FrameLayout 帧布局、TableLayout 表格布局、AbsoluteLayout 绝对布局、GridLayout 网格布局 7 种。后面的几种基本上用的很少了,而 Compose 的布局方式总共有三种:Column 纵向排列布局、Row ...
ComposeTestTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { IconImage() } } } } } @Composable funIconImage(){ Image( painter = painterResource(id = R.drawable.icon), contentDescription =...