jetpack1

组合函数

package com.example.myapplication1

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication1.ui.theme.MyApplication1Theme

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

// 定义可组合函数
@Composable
fun Greeting(name: String){
    Text(text = "name: $name")
}

// 添加预览
@Preview
@Composable
fun PreGreeting(){
    Greeting(name = "xixi") // 预览中显示xixi，模拟器中显示haha，因为预览函数不会被调用
}

布局

package com.example.myapplication1

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewsStory()
        }
    }
}

@Composable
fun NewsStory(){
    // 垂直排列
    Column(
        modifier = Modifier.padding(16.dp) // 间距
    ) {
        Image(
            painter = painterResource(R.drawable.header),
            contentDescription = null, // 给障碍人士的提示信息
            modifier = Modifier
                .height(180.dp)
                .fillMaxWidth(),
            contentScale = ContentScale.Crop // 适当裁剪
        )

        // 添加分割
        Spacer(Modifier.height(16.dp))

        Text("line 1")
        Text("line 2")
        Text("line 3")
    }
}

// 不会被应用调用的预览函数
@Preview
@Composable
fun DefaultPreview(){
    NewsStory()
}

Material Design

package com.example.myapplication1

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewsStory()
        }
    }
}

@Composable
fun NewsStory(){
    MaterialTheme() {
        val typography = MaterialTheme.typography // 样式

        // 垂直排列
        Column(
            modifier = Modifier.padding(16.dp) // 间距
        ) {
            Image(
                painter = painterResource(R.drawable.header),
                contentDescription = null, // 给障碍人士的提示信息
                modifier = Modifier
                    .height(180.dp)
                    .fillMaxWidth()
                    .clip(
                        shape = RoundedCornerShape(4.dp), // 图片圆角
                    ),
                contentScale = ContentScale.Crop // 适当裁剪
            )

            // 添加分割
            Spacer(Modifier.height(16.dp))

            Text(
                "line 1" + "hhhhhhh         hhhhhhh" + "xixixixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                style = typography.h6,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis // 超过两行被截断
            )
            Text("line 2", style = typography.body2)
            Text("line 3", style = typography.body2)
        }
    }

}

// 不会被应用调用的预览函数
@Preview
@Composable
fun DefaultPreview(){
    NewsStory()
}