如何使用 Modifier.weight 在 Row 或 Column 中实现弹性布局

@Composable
fun Modifier04() {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
                .weight(1f)
                .height(50.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .weight(2f)
                .height(50.dp)
                .background(Color.Green)
        )
    }
}

在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用Compose实现的可拖拽排序的完整示例代码: ```kotlin import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import kotlin.random.Random data class Item(val id: Int, val text: String) @Composable fun DraggableLazyColumn(items: List<Item>, onItemsChanged: (List<Item>) -> Unit) { var draggedItem: Item? by remember { mutableStateOf(null) } var dragIndex by remember { mutableStateOf(-1) } LazyColumn { itemsIndexed(items) { index, item -> if (dragIndex == index) { // This item is being dragged, so don't show it Spacer(modifier = Modifier .height(64.dp) .fillMaxWidth()) } else { ListItem( text = { Text(item.text) }, modifier = Modifier .draggable( state = rememberDraggableState { delta -> val newIndex = calculateNewIndex(dragIndex, delta, items.size) if (newIndex != dragIndex) { // Update the list when the item is dragged to a new position onItemsChanged(items.move(dragIndex, newIndex)) dragIndex = newIndex } }, // When the item is picked up, remember it and its index onDragStarted = { draggedItem = item dragIndex = index }, // When the drag is finished, clear the draggedItem and dragIndex onDragStopped = { draggedItem = null dragIndex = -1 } ) // Set the background color to be different for the dragged item .background(if (dragIndex == index) Color.LightGray else Color.White) ) } } } } @Composable fun App() { var items by remember { mutableStateOf(generateItems(10)) } Scaffold( topBar = { TopAppBar(title = { Text("Draggable Lazy Column") }) } ) { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally ) { DraggableLazyColumn(items = items) { newItems -> items = newItems } } } } fun main() = Window { App() } fun generateItems(n: Int): List<Item> { return List(n) { Item(it, "Item ${it + 1}") } } fun calculateNewIndex(index: Int, delta: Float, size: Int): Int { // Calculate the new index based on the y delta and the number of items val newIndex = (index + (delta / 64.dp.toPx())).toInt() return newIndex.coerceIn(0, size - 1) } fun <T> List<T>.move(fromIndex: Int, toIndex: Int): List<T> { val mutableList = this.toMutableList() val item = mutableList.removeAt(fromIndex) mutableList.add(toIndex, item) return mutableList } ``` 在这个示例,我们定义了一个 `DraggableLazyColumn` 组件,它接受一个 `List<Item>` 和一个回调函数 `onItemsChanged`,当列表项被拖拽排序时,我们将调用此回调函数以更新列表项的顺序。 我们使用 `LazyColumn` 来渲染列表,并使用 `itemsIndexed` 将每个项目与其索引一起传递。对于正在拖动的项目,我们使用一个 `Spacer` 来占用列表的空间,以便其他项目能够正确放置在其位置上。 对于所有其他项目,我们使用 `ListItem` 来显示每个项目的文本,并在其上使用 `Modifier.draggable()` 使其可拖动。我们使用 `onDragStarted` 和 `onDragStopped` 回调来跟踪正在拖动的项目以及其索引,并在 `onDragStarted` 设置拖动项目的背景颜色。在 `state` 回调,我们计算出新的索引,并在 `onDragStopped` 清除拖动项目和索引。 最后,我们使用 `generateItems` 函数生成一些随机项目,并将它们传递给 `DraggableLazyColumn` 组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值