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

Posted 2022-05-17 上马定江山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[源码分享] 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()