海南通信建设有限公司官方网站,杭州微信网站开发,西峡微网站开发,怎么把地图放到网站上一、概念
1.1 Compose优势
由一个个可以组合的Composable函数拼成界面#xff0c;方便维护和复用。布局模型不允许多次测量#xff0c;提升了性能。Compose可以和View互操作#xff08;相互包含对方#xff09;。
1.2 声明式UI APP展示的数据绝大多数不是静态数据而是会…一、概念
1.1 Compose优势
由一个个可以组合的Composable函数拼成界面方便维护和复用。布局模型不允许多次测量提升了性能。Compose可以和View互操作相互包含对方。
1.2 声明式UI APP展示的数据绝大多数不是静态数据而是会实时更新传统的命令式UI写法更新界面繁琐且容易同步错误。Compose会对界面用到的数据自动进行订阅属性委托当数据变化时界面会自动更新同为数据和界面关联databinding只能更新组件的值Compose可以控制组件切换显示。 声明式UI只需要把界面写出来不需要再手动写代码去刷新界面。重新生成整个屏幕界面成本高昂Compose生成界面后数据变动只执行必要的重组局部刷新。命令式UIxml写的界面当数据变了就需要Java/Kotlin手动命令指挥刷新即 findViewById( ) 遍历树拿到控件再 setText( ) 设置数据改变节点。
二、使用
2.1 添加依赖
查看官方最新版本
兼容性对应关系 BoM物料清单随着依赖的库越来越多为了保证不同库不同版本之间能正常配合引入依赖时具体的库不指定版本而是由BoM管理。 最低版本Kotlin ≥ 1.5.10、Android ≥ 5.0API21、AndroidStudio ≥ Arctic Fox 2020.3.1。 android {buildFeatures {compose true //启用Compose功能}composeOptions {//见上方链接此处定义的Kotlin编译器扩展版本需要对应兼容的Kotlin版本kotlinCompilerExtensionVersion 1.4.2}
}
dependencies {//Composedef composeBom platform(androidx.compose:compose-bom:2023.01.00)implementation composeBomandroidTestImplementation composeBom//主题implementation androidx.compose.material3:material3//预览implementation androidx.compose.ui:ui-tooling-previewdebugImplementation androidx.compose.ui:ui-tooling//UI测试androidTestImplementation androidx.compose.ui:ui-test-junit4debugImplementation androidx.compose.ui:ui-test-manifest//可选搭配implementation androidx.activity:activity-compose:1.7.0 //Activityimplementation androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1 //ViewModelimplementation androidx.compose.runtime:runtime-livedata //LiveDataimplementation androidx.constraintlayout:constraintlayout-compose:1.0.1 //ConstraintLayoutimplementation io.coil-kt:coil-compose:2.3.0 //Coilimplementation androidx.navigation:navigation-compose:2.5.3 //Navigation// implementation com.google.accompanist:accompanist-appcompat-theme:0.28.0 //AppCompatTheme
} 2.2 Activity调用 需要继承的是ComponentActivity使用 setContent { } 替换 setContentView( )。 class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent { // 设置显示内容用来替换setContentViewShow(Hello World!)}}
}
三、预览效果 Preview 使用该注解的组合函数可以在AndroidStudio右上角直接预览效果和点击交互也能直接部署该预览在真机或模拟器上查看效果和点击交互。AS按出prev能快速打出模板代码。 只能修饰无参可组合函数可以用无参函数包裹有参函数传个值给它来预览。
neme设置的该名称会在布局预览中显示。showBackground预览默认是不显示背景色的设为true才显示。backgroundColor设置背景颜色。showDecoration是否显示Statusbar和Toolbartrue为显示。group为该Preview设置group名字可以在UI中以group为单位显示。fontScale可以在预览中对字体放大范围是从0.01。showSystemUi设为 true 显示系统界面状态栏屏幕按键。 widthDp heightDp 预览区域的大小单位为dp和 showSystemUI 互斥。device预览机型Devices.DESKTOP、Devices.PIXEL_4、Devices.NEXUS_6。apiLevel预览不同版本的效果
Preview
Composable
fun WrapperShow() {Show(Word) //包裹一层再传个值
}Composable
fun Show(str: String) {Text(text Hello ${str}!)
}
3.1 对屏幕级组合函数使用预览失败
原因系统无法正确实例化 ViewModel 因为它依赖于运行中的 Android 系统而预览系统只有UI相关代码。
解决抽离出一个只依赖于状态类的组合函数。
Composable
fun DemoScreen(viewModel: DemoViewModel viewModel(),
){DemoContent(viewModel.demoState)
}Composable
private fun DemoContent(demoState:DemoState
){/* ... */
}Composable
Preview
private fun PreviewDemoContent(){DemoContent(remember{DemoState()})
}
3.2 引用了Android运行时才能获取的类预览失败
原因像 Application 类在预览系统中是不存在的。
解决通过 LocalInspectionMode.current 来判断当前是否运行于预览系统中true就使用固定字符串。
Composable
fun MyTest(){Text(textif(LocalInspectionMode.current) 预览中 else MyClass.getDesc())
}
