2022.9.7 Compose布局（一）

2022-09-07

Compose布局(一)

1.Compose中布局的目标

实现高性能

让开发者能够轻松编写自定义布局

在Compose中,通过避免多次测量布局子级可实现高性能,如果需要进行多次测量,Compose具有一个特殊系统,即固有特性测量。

2.标准布局组件

使用Colmn可将多个项垂直地放置在屏幕上

使用Row可将多个项水平地放置在屏幕上

使用Box可将一个元素放在另一个元素上

3.修饰符

修饰符的作用类似于基于视图的布局中的布局参数,借助修饰符,可以修饰或扩充可组合项。我们可以使用修饰符来执行以下操作:

更改可组合项的大小、布局、行为和外观
添加信息,如无障碍标签
处理用户输入
添加高级互动,如使元素可点击、可滚动、可拖动或可缩放

例:

编写一个PhotoCard.kt

@Composable
fun PhotoCard(modifier: Modifier = Modifier){
    Row{
        Surface(modifier = Modifier.size(50.dp),
        shape = CircleShape,
        color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)) {
            
        }
        
        Spacer(modifier = Modifier.width(10.dp))
        
        Column {
            Text(text = "Leiteorz",fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(10.dp))
            Text(text = "3 minutes ago", style = MaterialTheme.typography.body2)
        }
    }
}

修改MainActivity.kt

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

继续美化:

为头像添加图片
设置界面为圆角
为点击添加波纹效果
更换显示时间的显示字体
设置文字内容垂直居中

@Composable
fun PhotoCard(modifier: Modifier = Modifier){
    Row(modifier = Modifier.clip(RoundedCornerShape(4.dp))
        .background(color = MaterialTheme.colors.surface)
        .clickable(onClick = {}).padding(16.dp)){

        Surface(modifier = Modifier.size(50.dp),
        shape = CircleShape,
        color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)) {
            Image(painter = painterResource(id = com.example.composep97.R.drawable.img_2),
            contentDescription = null
            )
        }
        
        Spacer(modifier = Modifier.width(10.dp))
        
        Column(modifier = Modifier.padding(8.dp)
            .align(Alignment.CenterVertically)) {
            Text(text = "Leiteorz",fontWeight = FontWeight.Bold)
            Spacer(modifier = Modifier.height(10.dp))
            Text(text = "3 minutes ago", style = MaterialTheme.typography.body2)
        }
    }
}

4.Slots API

Material组件大量使用槽位API,这是Compose引入的一种模式,它在可组合项之上带来一层自定义设置。这种方法使组件变得更加灵活,因为它们接受可以自行配置的子元素,而不必公开子元素的每个配置参数。槽位会在界面中流出空白区域,让开发者按照自己的意愿来填充。

4.1 Scaffold

Scaffold可让我们实现具有基本Material Design布局结构的界面。Scaffold可以为最常见的顶级Material组件（如TopAppBar、BottomAppBar、FloatingActionButton和Drawer）提供槽位。通过使用Scaffold,可轻松确保这些组件得到适当放置且正确地协同工作。

@Composable
fun LayoutStudy(){
   Scaffold(
       topBar = {
           TopAppBar(
               title = {
                   Text(text = "LayoutStudy")
               },
               actions = {
                   IconButton(onClick = {}) {
                       Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)
                   }
               }
           )
       }
   ){ innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
   }
}

@Composable
fun BodyContent(modifier: Modifier = Modifier){
    Column(modifier = modifier.padding(8.dp)) {
        Text(text = "Hi there!")
        Text(text = "Thanks for going through the LayoutStudy")
    }
}

5.使用列表

如果我们知道用例不需要任何滚动,可以使用简单的Column或Row

如果需要显示大量列表项(或长度未知的列表),可以使用LazyColumn或LazyRow

使用Column创建列表

100个事件已经绘制完成

@Composable
fun SimpleColumn(){
    Column{
        repeat(100){
            Text(text = "Item #$it",style = MaterialTheme.typography.subtitle1)
        }
    }
}

列表无法滚动

如果需要让其能够滚动,需要给一个状态

@Composable
fun SimpleColumn(){
    val scrollState = rememberScrollState()
    Column(Modifier.verticalScroll(scrollState)){
        repeat(100){
            Text(text = "Item #$it",style = MaterialTheme.typography.subtitle1)
        }
    }
}

使用LazyColumn创建列表

LazyColumn自带缓冲功能(滑动到哪再进行绘制,可以节省资源)，类似于RecyclerView

@Composable
fun LazyList(){
    val scrollState = rememberLazyListState()
    LazyColumn(state = scrollState){
        items(100){
            Text(text = "Item #$it", style = MaterialTheme.typography.subtitle1)
        }
    }
}

例:写一个带有两个按钮的LazyColumn

先准备两个按钮和LazyColumn

@Composable
fun ScrollingList(){
    val scrollState = rememberLazyListState()
    Column{
        Row{
            Button(modifier = Modifier.weight(1f),onClick = { /*TODO*/ }) {
                Text(text = "Scroll to the top")
            }

            Button(modifier = Modifier.weight(1f),onClick = { /*TODO*/ }) {
                Text(text = "Scroll to the end")
            }
        }

        LazyColumn(state = scrollState){
            items(100){
                ImageListItem(index = it)
            }
        }
    }
}

准备列表里面的内容

@Composable
fun ImageListItem(index: Int){
    Row(verticalAlignment = Alignment.CenterVertically) {
        Surface(shape = CircleShape) {
            Image(painter = painterResource(id = R.drawable.img_2),
                contentDescription = null,
                modifier = Modifier.size(50.dp),
            )
        }

        Spacer(modifier = Modifier.size(10.dp))

        Text(text = "Item #$index",style = MaterialTheme.typography.subtitle1)
    }
}

点击按钮后要通过scrollState状态去滑动

更新UI必须放进协程中

@Composable
fun ScrollingList(){
    val scrollState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()   //拿到一个协程作用域

    Column{
        Row{
            Button(modifier = Modifier.weight(1f),
                onClick = { coroutineScope.launch { scrollState.animateScrollToItem(0) } }
            ) {
                Text(text = "Scroll to the top")
            }

            Button(modifier = Modifier.weight(1f),
                onClick = { coroutineScope.launch { scrollState.animateScrollToItem(99) } }) {
                Text(text = "Scroll to the end")
            }
        }

        LazyColumn(state = scrollState){
            items(100){
                ImageListItem(index = it)
            }
        }
    }
}