Jetpack 在 LazyCloumn 中组成 LazyColumn

Posted 2023-04-19

【中文标题】Jetpack 在 LazyCloumn 中组成 LazyColumn

【英文标题】：Jetpack compose LazyColumn inside LazyCloumn

【发布时间】：2022-01-20 21:00:15

【问题描述】：

在我的主页中，我有一个惰性列，其中一项是水平寻呼机。在每个水平寻呼机中都有一些页面，我也需要在其中包含lazyColumn。错误是您不允许在同一方向使用嵌套滚动。我应该如何实现这个 ui？

@Composable
fun Home() 
    LazyColumn 
        item  
        item  
        item  

        item 
            TabRow(selectedTabIndex =) 

            
        
        item 
            HorizontalPager(count =)  page ->
                
                when 
                    page == 0 -> 
                        LazyColumn 
                            items(list) 
                                
                            
                        
                        
                    
                
            
        
    

【参考方案1】：

我创建了一个示例。对我来说，它按预期工作。请看一下

class ComposeActivity8 : ComponentActivity() 

    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            ComposeTutorialTheme 
                Home()
            
        
    

    @Composable
    fun VItem(text: String) 
        Text(modifier = Modifier.padding(40.dp), text = text)
        Divider(color = Color.Black)
    

    @Composable
    fun HItem(content: @Composable BoxScope.() -> Unit) 
        Box 
            content()
            Divider(
                color = Color.Red, modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .fillMaxHeight()
                    .width(1.dp)
            )
        
    

    @Composable
    fun CreateLazyColumn(pos: String, countItem: Int) 
        LazyColumn 
            items(count = countItem, itemContent =  index ->
                VItem("$pos.$index")
            )
        
    

    @Composable
    fun Home() 
        LazyColumn 
            item  VItem("Vertical item 1") 
            item  VItem("Vertical item 2") 
            item  VItem("Vertical item 3") 
            item  VItem("Vertical item 4") 
            item 
                LazyRow(modifier = Modifier.height(150.dp)) 
                    item 
                        HItem 
                            CreateLazyColumn("Horizontal item 5.1", 6)
                        
                    
                    item 
                        HItem 
                            CreateLazyColumn("Horizontal item 5.2", 10)
                        
                    
                    item 
                        HItem 
                            Text(
                                modifier = Modifier.padding(40.dp),
                                text = "Horizontal item 5.3"
                            )
                        
                    
                    item 
                        HItem 
                            Text(
                                modifier = Modifier.padding(40.dp),
                                text = "Horizontal item 5.4"
                            )
                        
                    
                    item 
                        HItem 
                            CreateLazyColumn("Horizontal 5.5", 6)
                        
                    
                    item 
                        HItem 
                            Text(
                                modifier = Modifier.padding(40.dp),
                                text = "Horizontal item 5.6"
                            )
                        
                    
                    item 
                        HItem 
                            Text(
                                modifier = Modifier.padding(40.dp),
                                text = "Horizontal item 5.7"
                            )
                        
                    
                    item 
                        HItem 
                            Text(
                                modifier = Modifier.padding(40.dp),
                                text = "Horizontal item 5.8"
                            )
                        
                    
                
                Divider(color = Color.Black)
            
            item  VItem("Vertical item 6") 
            item  VItem("Vertical item 7") 
            item  VItem("Vertical item 8") 
            item  VItem("Vertical item 9") 
            item  VItem("Vertical item 10") 
            item  VItem("Vertical item 11") 
            item  VItem("Vertical item 12") 
        
    

视频