Jetpack Compose 实时预览

Question

I just started working on jetpack compose and downloaded sample of Jetnews .

When I opened MainActivity or JetnewsApp.kt I am unable to see preview of Composable function, I added @Preview annotation as well but unable to see live preview.

Can anyone please help me to find live preview.
Thanks in advance.

Answer 1

If your Preview never show after add @Preview annotation in JetnewsApp class. In my case after adding @Preview i close project and then open project again it's working fine for me in Macbook pro.

Answer 2

In JetnewsApp , SelectTopicButton.kt only have @Preview() tags. When in any file we have @Preview() it will automatically show preview in the right side.

In show decoration mode you can get the preview of the item with the mobile image, how does it look on the screen.

To get a live preview we need to add @Preview tag before @Composable tag and the fun must have something to render.

I had tried adding @Preview() and @Preview("MyScreen preview") in JetnewsApp.kt and it shows the preview.

Answer 3

Update:

Before that we have to add @Preview on JetnewsApp to get preview.

@Preview
@Composable
fun JetnewsApp() { ... }

---

You just need to check the "Show Decorations" option to show real layout preview.

You can toggle both preview using same option.

Check the below image:

Update 2:

Also invalidate and restart Android Studio if it doesn't work at first. Remember this is still in development.

Answer 4

btw currently @Preview just work for @Composable function without params. so please check again your composable function

Answer 5

I had a similar problem where the preview wouldn't show. The problem was that I had a call to setContent in the function also. Removing this and rebuilding rendered the preview as expected.

So

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        setContent {
            Greeting()
        }
    }

would fail and

    @Preview(showBackground = true, widthDp = 320)
    @Composable
    fun PreviewMainScreen() {
        Greeting()
    }

worked as expected.

Surprisingly, and this is the bit I don't understand, once the preview had rendered correctly, I could add the setContent again and it would update and still show.

Answer 6

I hope the answers in the previous post helped. However, I want to add a simple feature that will assist while minor modifications are made to the Jetpack compose code, preventing the need to frequently launch your app in order to view the altered layout.

Steps

1. Live edit of literals should be ON. It will be placed to the left side of Code|Split|Design.

2. Start interactive mode. It will be placed to the page of function preview. below Code|Split|Design.