Compose视图的编写

最新推荐文章于 2024-05-30 11:50:25 发布

荭色海湾

最新推荐文章于 2024-05-30 11:50:25 发布

阅读量365

点赞数 10

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

本文链接：https://blog.csdn.net/qq_53374893/article/details/135644360

版权

Androd Jetpack Compose 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在以前的view goup 是继承关系

而现在的compose是组合关系。进行了解耦。组件与组件之间没有关联，拿过来直接用就可以了，不会因为一个的改动去改变另一个。

1.Android的整体结构

phone Window 窗口 Activity Dialog Toast

DecirView 父View

LinearLayout

TitleView

ContentView R.layout.xxx

ComoseView 连接 View 与 Compose 的一个桥梁

LayoutNode 最终会变成虚拟节点 Compose

Text -> LayoutNode 轻量

Image -> LayoutNode 也是一个树形结构

1.View ViewGoup 修改升级十分麻烦

2. 简单视图编写

package com.tiger.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.tiger.compose0117.ui.theme.Compose0117Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
//            Compose0117Theme {
//                // A surface container using the 'background' color from the theme
//                Surface(
//                    modifier = Modifier.fillMaxSize(),
//                    color = MaterialTheme.colorScheme.background
//                ) {
//                    Greeting("Android")
//                }
//            }

            Greeting(name = "Compose Colin")
        }
    }
}

@Composable//微件
fun Greeting(name: String) {
    Column {
        Text(text = "Hello $name!")
        Image(ImageBitmap.imageResource(id = R.mipmap.boy), contentDescription = null, modifier = Modifier
            .width(400.dp)//宽
            .height(400.dp)//高
            .padding(10.dp)//内边距
            .clip(shape = RoundedCornerShape(200.dp)))//圆角
    }

}
//
//@Preview(showBackground = true)
//@Composable
//fun GreetingPreview() {
//    Compose0117Theme {
//        Greeting("Android")
//    }
//}

竖状列表

package com.tiger.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.tiger.compose0117.ui.theme.Compose0117Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose Colin")
        }
    }
}

@Composable//微件
fun Greeting(name: String) {
    Column {
        Text(text = "Hello $name!")
        Image(ImageBitmap.imageResource(id = R.mipmap.boy), contentDescription = null, modifier = Modifier
            .width(300.dp)//宽
            .height(400.dp)//高
            .padding(10.dp)//内边距
            .clip(shape = RoundedCornerShape(50.dp)))//圆角
        Text(text = "Hello $name!")
        Image(ImageBitmap.imageResource(id = R.mipmap.boy), contentDescription = null, modifier = Modifier
            .width(300.dp)//宽
            .height(400.dp)//高
            .padding(10.dp)//内边距
            .clip(shape = RoundedCornerShape(50.dp)))//圆角
    }

}