Compose 基础组件

Modifier 修饰符

在传统视图体系中，使用XML文件描述组件的样式，而在Compose中使用Modifier，每个基础的Composable组件都有一个modifier参数，通过Modifier可以修改样式如边距、字体、位移等。

内边距：

@Stable
fun Modifier.padding(start: Dp = 0.dp,top: Dp = 0.dp,end: Dp = 0.dp,bottom: Dp = 0.dp
)@Stable
fun Modifier.padding(horizontal: Dp = 0.dp,vertical: Dp = 0.dp
)@Stable
fun Modifier.padding(all: Dp)

尺寸：

Text("hello world", modifier = Modifier.fillMaxSize()) // 填充父容器Text("hello world", modifier = Modifier.fillMaxWidth()) // 只充满宽
Text("hello world", modifier = Modifier.fillMaxHeight()) // 只充满高Text("hello world", modifier = Modifier.size(100.dp)) // 宽高都为100dp
Text("hello world", modifier = Modifier.size(width = 100.dp, height = 110.dp)) // 宽为100dp，高为110dp// 仅在Box组件中使用
Box {Spacer(Modifier.matchParentSize().background(Color.Red))Text("hello world", fontSize = 30.sp)
}

Row和Column的weight修饰符：

Row(Modifier.fillMaxSize().padding(top = 10.dp)) {Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))Box(Modifier.weight(1f).height(50.dp).background(Color.Red))
}

点击：

Modifier.size(50.dp).background(Color.Green).clickable {// 执行点击事件需要的操作
}

圆角：

@Stable
fun Modifier.shadow(elevation: Dp, // 阴影的高度shape: Shape = RectangleShape, // Shapeclip: Boolean = elevation > 0.dp // 是否将内容图形裁剪到该形状
)

Scaffold 脚手架

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {val tabs = Tabs.values()var position by remember { mutableStateOf(Tabs.ONE) }Scaffold(// 标题栏topBar = {TopAppBar(title = { Text("标题") }, navigationIcon = {IconButton(onClick = { /*TODO*/ }) {Icon(Icons.Filled.ArrowBack, null)}})},// 悬浮按钮floatingActionButton = {FloatingActionButton(onClick = { /*TODO*/ }) {Text("确定")}},// 侧边栏drawerContent = {Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {Text("侧边栏")}},// 底部导航栏bottomBar = {BottomNavigation(backgroundColor = Color.Gray) {tabs.forEach { tab ->BottomNavigationItem(label = { Text(tab.title) },icon = { Icon(painterResource(tab.icon), null) },selected = tab == position,onClick = { position = tab },alwaysShowLabel = false,selectedContentColor = Color.Red,unselectedContentColor = Color.White)}}}) { paddingValues ->// 内容Box(modifier = Modifier.padding(paddingValues)) {when (position) {Tabs.ONE -> OnePage()Tabs.TWO -> TwoPage()Tabs.THREE -> ThreePage()Tabs.FOUR -> FourPage()}}}}}
}

enum class Tabs(val title: String, @DrawableRes val icon: Int) {ONE("one", R.drawable.ic_one),TWO("two", R.drawable.ic_two),THREE("three", R.drawable.ic_three),FOUR("four", R.drawable.ic_four)
}@Composable
fun BaseDefault(content: String) {Row(modifier = Modifier.fillMaxSize(),horizontalArrangement = Arrangement.Center,verticalAlignment = Alignment.CenterVertically) {Text(content, fontSize = 50.sp)}
}@Composable
fun OnePage() {BaseDefault("OnePage")
}@Composable
fun TwoPage() {BaseDefault("TwoPage")
}@Composable
fun ThreePage() {BaseDefault("ThreePage")
}@Composable
fun FourPage() {BaseDefault("FourPage")
}