Jetpack Compose 快速上手

荭色海湾

已于 2024-07-15 18:17:32 修改

阅读量579

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Androd Jetpack Compose 文章标签：学习 kotlin

于 2024-01-17 16:39:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53374893/article/details/135646509

1.Composable 注解与 Preview

package com.compose0117

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.compose0117.ui.theme.Compose0117Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(name = "My Android")


        }
    }


    @Composable
    fun MessageCard(name: String) {

        Text(text = "hello $name!")

    }

    @Preview
    @Composable
    fun PreviewMessageCard() {//预览函数不能带参数
        
        MessageCard(name = "android")

    }

}

2.布局

在Compose中，您可以通过从可组合函数中调用其他组合函数来构建界面层次结构

使用Column 垂直排列元素，使用Row水平排列项，使用Box堆叠元素

package com.compose0117

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

class MainActivity02 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            MessageCard(Message("Android","Jetpack Compose"))

        }
    }


    @Composable
    fun MessageCard(message: Message) {

        Column {
            Text(text = message.author)
            Text(text = message.body)
        }


    }

data class Message(val author:String,val body:String)

}

package com.compose0117

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

class MainActivity03 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(MainActivity02.Message("Android", "Jetpack Compose"))

        }
    }


    @Composable
    fun MessageCard(message: MainActivity02.Message) {

        Row {
            Image(painter = painterResource(id = R.drawable.boy),
                contentDescription = null//残障人士语音播报，这里没有，所以不需要设置，设为null
            )
            Column {
                Text(text = message.author)
                Text(text = message.body)
            }
        }


    }



}

3.配置布局

package com.compose0117

import android.os.Bundle
im

最低0.47元/天解锁文章

200万优质内容无限畅学