Jetpack Compose 学习记录一

一、安装配置、新建项目

1、下载最新版AS

 2、安装配置好环境后，点击 File -> New Project -> Empty Activity

 新建默认界面显示Hello Android！

二、组件

三、基础

1、setContent

该方法作用是和在Layout/View中的setContentView是一样的。setContent的方法也是有@Compose注解的方法。所以，在setContent中写入关于UI的@Compopse方法，即可在Activity中显示

    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val windowSizeClass = calculateWindowSizeClass(this)
            val displayFeatures = calculateDisplayFeatures(this)
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                ComposeApp(windowSizeClass = windowSizeClass, displayFeatures = displayFeatures)
            }
        }
    }

2、Modifier

该类是各个Compose的UI组件一定会用到的一个类。它是被用于设置UI的摆放位置，padding等修饰信息的类。关于Modifier相关的设置较多，在这里只介绍会经常用到的。

Modifier.padding(10.dp) // 给上下左右设置成同一个值 
Modifier.padding(10.dp, 11.dp, 12.dp, 13.dp) // 分别为上下左右设值 
Modifier.padding(10.dp, 11.dp) // 分别为上下和左右设值 
Modifier.padding(InnerPadding(10.dp, 11.dp, 12.dp, 13.dp))// 分别为上下左右设值 
Modifier.fillMaxHeight() // 填充整个宽度 
Modifier.fillMaxHeight() // 填充整个高度 
Modifier.fillMaxSize() // 填充整个宽度和高度 
Modifier.width(100.dp) // 设置宽度 
Modifier.height(60.dp)  // 设置高度 
Modifier.size(200.dp, 160.dp) // 设置高度和宽度 
Modifier.widthIn(200.dp) // 设置最大宽度 
Modifier.heightIn(200.dp) // 设置最大高度 
Modifier.sizeIn(200.dp, 100.dp, 100.dp, 50.dp) // 设置最大最小的宽度和高度
Modifier.gravity(Alignment.CenterHorizontally) // 横向居中 
Modifier.gravity(Alignment.Start) // 横向居左 
Modifier.gravity(Alignment.End) // 横向居右 
Modifier.rtl  // 从右到左 Modifier.ltr  // 从左到右 
Modifier.plus(otherModifier) // 把otherModifier的信息加入到现有的modifier中 
// Modifier的方法都返回Modifier的实例的链式调用，所以只要连续调用想要使用的方法即可

注：设置padding时，第一个padding为margin，第二个为padding，如图：

3、预览Preview

@Preview                             
@Preview(device = Devices.PHONE)     //手机样式
@Preview(device = Devices.FOLDABLE)  //手表
@Preview(device = Devices.TABLET)    //平板
@Preview(device = Devices.DESKTOP)   //TV

annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val widthDp: Int = -1,
    // TODO(mount): Make this Dp when they are inline classes
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)

四、View样式大小等参数修改

1、Text

text: String,//文本内容
modifier: Modifier = Modifier,//配置view宽高、padding、margin、shape、点击、透明度等参数
color: Color = Color.Unspecified,//文字颜色
fontSize: TextUnit = TextUnit.Unspecified,//字体大小
fontStyle: FontStyle? = null,//定义字体是斜体还是普通
fontWeight: FontWeight? = null,//字体厚度
fontFamily: FontFamily? = null,//字体样式
letterSpacing: TextUnit = TextUnit.Unspecified,//字母间距
textDecoration: TextDecoration? = null,//删除线、下划线等
textAlign: TextAlign? = null,//文字位置，居中、左、右
lineHeight: TextUnit = TextUnit.Unspecified,//段落行高
overflow: TextOverflow = TextOverflow.Clip,//文本超出宽度效果
softWrap: Boolean = true,//文本是否在超出宽度处换行，false不换行
maxLines: Int = Int.MAX_VALUE,//最大行数
onTextLayout: (TextLayoutResult) -> Unit = {},//在计算新的文本布局时执行的回调
style: TextStyle = LocalTextStyle.current //文本的样式配置，如颜色、字体、行高等。

 2、TextField

val context = LocalContext.current //上下文
val keyboardController = LocalSoftwareKeyboardController.current //键盘对象
//文本框的输入值需要由变量保存，否则无法显示输入
val inputValue = remember {
    mutableStateOf("")//设置默认输入值为空
}
TextField(
    modifier = Modifier.width(600.dp),
    value = inputValue.value,
    placeholder = { Text(text = "请输入") },//设置提示文本
    label = {//为文本框添加标签，当点击文本框时，标签会以动画的形式跑到文本框的上方
        Text(text = "请输入用户名")
    },
    singleLine = true,//设置文本框单行显示
    leadingIcon = { Icon(Icons.Filled.Person, contentDescription = "") },//设置文本开头的可选图标
    trailingIcon = { //设置文本末尾的可选图标
        if (inputValue.value.isNotEmpty()) {//文本框输入内容不为空时显示删除按钮
            IconButton(onClick = {
                inputValue.value = ""//清空输入内容
            }) {
                Icon(imageVector = Icons.Filled.Clear, contentDescription = "清除")//需要显示的图标
            }
        }
    },

    //文本框通常和键盘配合使用
    keyboardOptions = KeyboardOptions(
        //设置键盘选项，如键盘类型和操作
        keyboardType = KeyboardType.Text,//设置键盘类型：数字，Phone等
        imeAction = ImeAction.Done,//设置键盘操作，如next send search 等
    ),
    keyboardActions = KeyboardActions(//键盘事件回调，与imeAction一一对应
        onDone = {//点击键盘事件
            Toast.makeText(context, inputValue.value, Toast.LENGTH_SHORT).show()
            keyboardController?.hide()//隐藏键盘
        }
    ),
    colors = TextFieldDefaults.outlinedTextFieldColors(
        //colors属性设置文本框不同状态下的颜色
        focusedBorderColor = Color.Yellow,//设置文本框焦点状态下的边框颜色
        unfocusedBorderColor = Color.Green,//设置文本框未获取焦点状态时的边框颜色
        disabledBorderColor = Color.Gray,//设置文本框禁用时的边框颜色
        cursorColor = Color.Yellow,//设置光标颜色
        //错误状态下的样式调整
        errorLabelColor = Color.Red,//设置错误状态下的标签颜色
        errorLeadingIconColor = Color.Red,//设置错误状态下文本框前端图标颜色
        errorTrailingIconColor = Color.Red,//设置错误状态下尾端图标颜色
        errorBorderColor = Color.Red,//设置错误状态下文本框边框颜色
        errorCursorColor = Color.Red,//设置错误状态下光标颜色
    ),
    isError = false,//true-显示错误状态的样式，false-普通状态样式
    enabled = true,//true-设置状态为可用，false-设置状态为禁用

    onValueChange = {//当输入内容改变时，会进行调用
        inputValue.value = it//更改状态持有者的内部值
    }
)

3、Column，Row

Column和Row可以理解为在View/Layout体系中的纵向和横向的ViewGroup。
也可以作为横向或纵向滑动的ScrollView，只需要Modifier配置verticalScroll(rememberScrollState())或horizontalScroll(rememberScrollState())