Merge pull request android#358 from android/jv/js_lazy

[Jetnews] Migrate to LazyColumn and LazyRow

Author: JolandaVerhoef

JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt

@@ -17,7 +17,6 @@
 package com.example.jetnews.ui.article
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -29,6 +28,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.preferredWidth
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.AmbientContentAlpha
 import androidx.compose.material.AmbientContentColor
@@ -75,27 +75,39 @@ private val defaultSpacerSize = 16.dp
 
 @Composable
 fun PostContent(post: Post, modifier: Modifier = Modifier) {
-    ScrollableColumn(
+    LazyColumn(
         modifier = modifier.padding(horizontal = defaultSpacerSize)
     ) {
-        Spacer(Modifier.preferredHeight(defaultSpacerSize))
-        PostHeaderImage(post)
-        Text(text = post.title, style = MaterialTheme.typography.h4)
-        Spacer(Modifier.preferredHeight(8.dp))
+        item {
+            Spacer(Modifier.preferredHeight(defaultSpacerSize))
+            PostHeaderImage(post)
+        }
+        item {
+            Text(text = post.title, style = MaterialTheme.typography.h4)
+            Spacer(Modifier.preferredHeight(8.dp))
+        }
         post.subtitle?.let { subtitle ->
-            Providers(AmbientContentAlpha provides ContentAlpha.medium) {
-                Text(
-                    text = subtitle,
-                    style = MaterialTheme.typography.body2,
-                    lineHeight = 20.sp
-                )
+            item {
+                Providers(AmbientContentAlpha provides ContentAlpha.medium) {
+                    Text(
+                        text = subtitle,
+                        style = MaterialTheme.typography.body2,
+                        lineHeight = 20.sp
+                    )
+                }
+                Spacer(Modifier.preferredHeight(defaultSpacerSize))
             }
-            Spacer(Modifier.preferredHeight(defaultSpacerSize))
         }
-        PostMetadata(post.metadata)
-        Spacer(Modifier.preferredHeight(24.dp))
-        PostContents(post.paragraphs)
-        Spacer(Modifier.preferredHeight(48.dp))
+        item {
+            PostMetadata(post.metadata)
+            Spacer(Modifier.preferredHeight(24.dp))
+        }
+        items(post.paragraphs) {
+            Paragraph(paragraph = it)
+        }
+        item {
+            Spacer(Modifier.preferredHeight(48.dp))
+        }
     }
 }
 
@@ -139,13 +151,6 @@ private fun PostMetadata(metadata: Metadata) {
     }
 }
 
-@Composable
-private fun PostContents(paragraphs: List<Paragraph>) {
-    paragraphs.forEach {
-        Paragraph(paragraph = it)
-    }
-}
-
 @Composable
 private fun Paragraph(paragraph: Paragraph) {
     val (textStyle, paragraphStyle, trailingPadding) = paragraph.type.getTextAndParagraphStyle()

JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt

@@ -16,15 +16,15 @@
 
 package com.example.jetnews.ui.home
 
-import androidx.compose.foundation.ScrollableColumn
-import androidx.compose.foundation.ScrollableRow
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
@@ -292,11 +292,11 @@ private fun PostList(
     val postsPopular = posts.subList(2, 7)
     val postsHistory = posts.subList(7, 10)
 
-    ScrollableColumn(modifier = modifier) {
-        PostListTopSection(postTop, navigateTo)
-        PostListSimpleSection(postsSimple, navigateTo, favorites, onToggleFavorite)
-        PostListPopularSection(postsPopular, navigateTo)
-        PostListHistorySection(postsHistory, navigateTo)
+    LazyColumn(modifier = modifier) {
+        item { PostListTopSection(postTop, navigateTo) }
+        item { PostListSimpleSection(postsSimple, navigateTo, favorites, onToggleFavorite) }
+        item { PostListPopularSection(postsPopular, navigateTo) }
+        item { PostListHistorySection(postsHistory, navigateTo) }
     }
 }
 
@@ -374,8 +374,8 @@ private fun PostListPopularSection(
             style = MaterialTheme.typography.subtitle1
         )
 
-        ScrollableRow(modifier = Modifier.padding(end = 16.dp)) {
-            posts.forEach { post ->
+        LazyRow(modifier = Modifier.padding(end = 16.dp)) {
+            items(posts) { post ->
                 PostCardPopular(post, navigateTo, Modifier.padding(start = 16.dp, bottom = 16.dp))
             }
         }

JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt

@@ -17,13 +17,13 @@
 package com.example.jetnews.ui.interests
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.selection.toggleable
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Divider
@@ -287,8 +287,8 @@ private fun TabWithTopics(
     selectedTopics: Set<String>,
     onTopicSelect: (String) -> Unit
 ) {
-    ScrollableColumn(modifier = Modifier.padding(top = 16.dp)) {
-        topics.forEach { topic ->
+    LazyColumn(modifier = Modifier.padding(top = 16.dp)) {
+        items(topics) { topic ->
             TopicItem(
                 topic,
                 selected = selectedTopics.contains(topic)
@@ -311,14 +311,16 @@ private fun TabWithSections(
     selectedTopics: Set<TopicSelection>,
     onTopicSelect: (TopicSelection) -> Unit
 ) {
-    ScrollableColumn {
+    LazyColumn {
         sections.forEach { (section, topics) ->
-            Text(
-                text = section,
-                modifier = Modifier.padding(16.dp),
-                style = MaterialTheme.typography.subtitle1
-            )
-            topics.forEach { topic ->
+            item {
+                Text(
+                    text = section,
+                    modifier = Modifier.padding(16.dp),
+                    style = MaterialTheme.typography.subtitle1
+                )
+            }
+            items(topics) { topic ->
                 TopicItem(
                     itemTitle = topic,
                     selected = selectedTopics.contains(TopicSelection(section, topic))