[源码分享] compose框架搭建一个简单界面

[源码分享] compose框架搭建一个简单界面 前言此文是使用jetpack 下的compose框架创建的一个简单安卓界面ui与逻辑混编源码是直接复制过来的不兼容任何项目仅供参考学习使用之后项目基本完成后将开放项目源代码。先上效果图:源码package com.jeady.jcommunity.ui import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.rotate import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp import com.jeady.jcommunity.isLogin import com.jeady.jcommunity.R var showEmailRegistered mutableStateOf(false) Composable fun LoginPage(){ if(!showEmailRegistered.value){ Column(modifier Modifier .fillMaxSize() .padding(horizontal 20.dp)) { Spacer(modifier Modifier.weight(1F)) IconButton( modifier Modifier .size(100.dp) .clip(RoundedCornerShape(50.dp)) .align(Alignment.CenterHorizontally), onClick { println(click icon) } ){ Image( modifier Modifier .fillMaxSize() .rotate(10F), painter painterResource(id R.mipmap.icon), contentDescription 社区图标 ) } Spacer(modifier Modifier.weight(1F)) Column(modifier Modifier.weight(1F), verticalArrangement Arrangement.SpaceBetween) { Button(modifier Modifier .fillMaxWidth() .clip(RoundedCornerShape(20.dp)), onClick { isLogin.value true }) { Text(text 游客模式 ) } Button(modifier Modifier .fillMaxWidth() .clip(RoundedCornerShape(20.dp)), onClick { println(注册) showEmailRegistered.value true }) { Text(text 邮箱注册) } Row( modifier Modifier.padding(start 10.dp)){ Checkbox( modifier Modifier.align(Alignment.CenterVertically), checked true, onCheckedChange { println(dont agree thissss) showDialog(不同意协议本App将拒绝提供任何服务是否退出App?, negativeBtnText 退出App, positiveBtnText 同意协议) } ) Text( modifier Modifier.align(Alignment.CenterVertically), text 同意) TextButton( onClick { }) { Text( text 用户协议) } } } Spacer(modifier Modifier.weight(1F)) } } else { RegisteredPage() } }Jetpack Compose学习资料分享接下来我将会给大家介绍一份谷歌大佬强势分享《Jetpack Compose 权威指南》手把手教大家Jetpack Compose从入门到精通。这份资料旨在给希望了解、学习、应用Android Jetpack Compose的小伙伴一个参考资料。资料详情第一章 初识 Jetpack Compose1. 为什么我们需要一个新的UI 工具2. Jetpack Compose的着重点加速开发强大的UI工具直观的Kotlin API3. API 设计4. Compose API 的原则一切都是函数顶层函数Top-level function组合优于继承信任单一来源5. 深入了解ComposeCoreFoundationMaterial6. 插槽API第二章 Jetpack Compose构建Android UI1. Android Jetpack Compose 最全上手指南Jetpack Compose 环境准备和Hello World布局使用Material design 设计Compose 布局实时预览……2. 深入详解 Jetpack Compose | 优化 UI 构建Compose 所解决的问题Composable 函数剖析声明式 UI组合 vs 继承封装重组……3. 深入详解 Jetpack Compose | 实现原理Composable 注解意味着什么执行模式Positional Memoization (位置记忆化)存储参数重组……第三章 Jetpack Compose 项目实战演练附Demo1. Jetpack Compose应用1开始前的准备创建DEMO遇到的问题2. Jetpack Compose应用23. Jetpack Compose应用做一个倒计时器数据结构倒计时功能状态模式Compose 布局绘制时钟4. 用Jetpack Compose写一个玩安卓App准备工作引入依赖新建 Activity创建 ComposePlayTheme画页面底部导航栏管理状态添加页面5. 用Compose Android 写一个天气应用开篇画页面画背景画内容……6. 用Compose快速打造一个“电影App”成品实现方案实战不足……因为篇幅原因只展示部分内容截图有需要完整版的点击下方卡片扫码免费获取全部内容。