JetPack Compose UI 简单介绍

一、简单介绍：
Compose UI 解释为声明式UI、目的就是要取代xml、解放双手。  
  官方介绍：https://developer.android.com/jetpack/compose。
如果不理解声明式UI建议花五分钟视频了解下：https://www.bilibili.com/video/BV1c5411K75r
相信对你会很有帮助

---

前言：能被jetpack放到一个单独的lable里、可见Google对它的重视、它不在是某个单独的库、而是一套框架、或许未来将会终结xml的时代！

二、代码及预览
编译器预览图：

看着像flutter？ 是的很像、但是写法要比flutter更友好、得益于KT的加持，有些童鞋会问 这不就是new一个对象吗？ 答案是否定的、他是个函数（Image、Text、Column）、至于底层用的什么就再讨论了、但是可以肯定的告诉你、底层不是New ImageView()或Text().....来做的。日后再研究吧！

相关代码：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewsStore()
        }
    }

    @Composable
    fun NewsStore() {
        //MaterialTheme 可由可无、对布局基本没影响
        MaterialTheme {
            /**
             * Column 默认垂直排列
             * horizontalAlignment = Alignment.CenterHorizontally 水平局中
             * Modifier 包含了对布局对象的控制、大小 pading等信息
             */
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .padding(20.dp)
                    .width(300.dp)
            ) {
//            图片呗
                /**
                 * painter 图片资源设置
                 * clip 图片圆角设置、分别对应topStart，topEnd，bottomEnd,bottomStart
                 * 其他属性省略
                 */
                Image(
                    painter = painterResource(id = R.drawable.header),
                    modifier = Modifier
                        .height(150.dp)
                        .width(200.dp)
                        .clip(RoundedCornerShape(20.dp, 20.dp, 10.dp, 10.dp)),
                    contentDescription = "这里是图片描述"
                )
                //类似 xml中space、用来做填充
                Spacer(modifier = Modifier.height(20.dp))
//            字体呗
                Text(text = "first", color = Color.Green)
                Text(text = "second", color = Color.Blue)
                Text(text = "three", color = Color.Magenta)
                Text(
                    text = "在本例中，文章的标题很短。但有时，一篇文章的标题很长，我们不希望过长的标题影响应用的外观。尝试更改第一个文本元素。",
                    color = Color.Cyan,
                    overflow = TextOverflow.Ellipsis,
                    maxLines = 2
                    )
            }
        }
    }

    /**
     * Preview 预览需要写上此注释
     */
    @Preview
    @Composable
    fun DefaultPreView() {
        NewsStore()
    }
}

 三：环境配置

 根目录build.gradle：

buildscript {
    ext.kotlin_version = "1.5.10"
    ext.compose_version = '1.0.0-rc02'
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.0.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

 app 下build.gradle：

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.qiqilego.myapplication"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildFeatures {           // 2
        compose true
    }

    composeOptions {        // 3
        kotlinCompilerVersion kotlin_version
        kotlinCompilerExtensionVersion compose_version
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation "androidx.compose.ui:ui:$compose_version"
    // Tooling support (Previews, etc.)
    implementation "androidx.compose.ui:ui-tooling:$compose_version"
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation "androidx.compose.foundation:foundation:$compose_version"
    // Material Design
    implementation "androidx.compose.material:material:$compose_version"
    // Material design icons
    implementation "androidx.compose.material:material-icons-core:$compose_version"
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
    // Integration with observables
    implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
    implementation "androidx.compose.runtime:runtime-rxjava2:$compose_version"

    // UI Tests
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"

    implementation "androidx.activity:activity-compose:$compose_version"

}

 注意：工程必须为Kotlin工程、

Kotlin版本：1.5.10及以上、

build:gradle:>=7.0.0

Android Studio 只能用预览版、Android Studio Bumblebee | 2021.1.1 Canary 6 不过和正式版不冲突。各忙各的

jdk版本必须 >=11 
jdk版本更新后的设置：

 jdk11 资源链接：https://download.csdn.net/download/BirdEatBug/20688997?spm=1001.2014.3001.5501

预览版android studio链接：https://download.csdn.net/download/BirdEatBug/20689040?spm=1001.2014.3001.5501