How to make constraints to slide animation

Question

How to make constraints to slide animation

sonder-joker opened this issue 3 years ago · 14 comments

I wish to make a slide animation
but how to constraints it

Answer 1 · 2021-04-12T06:33:13.000Z

The mp3 seem not work....
I make a custom column which specific width 160dp, but when I add slide animation it will over the column and to the far left of the screen.I wish it can disappear in the sidebar

Answer 2 · 2021-04-12T09:12:57.000Z

Hi. It is not clear what is the problem without video, or some code. But maybe you can use clip Modifier on your custom column.

Answer 3 · 2021-04-14T02:11:46.000Z

2021-04-14.10-09-36.mp4

It exceeds that column, I hope to make it disappear in that column

Answer 4 · 2021-04-14T08:02:27.000Z

I think Modifier.clip on the container should help. If not, could you provide a reproducer?

Answer 5 · 2021-04-21T03:41:57.000Z

I don't know how to do it...The code is here and I change to use crossfadescale()
https://github.com/sonder-joker/mirai-compose/blob/8c78c483eeff33d9d7308c26101e9bcdbca1ba3c/mirai-compose/src/main/kotlin/ui/feature/plugin/PluginsView.kt#L65

Answer 6 · 2021-04-21T03:54:45.000Z

Also I have some question about stack navigation.
Consider UI with video above.I have five selection text

The robot column can be choose to login many account so I make such a navigation

sealed class Config : Parcelable {
        class BotR(val bot:Bot) : Config()
        object Setting : Config()
        object About : Config()
        object Log : Config()
        object Plugin : Config()
}

is Config.BotR -> {
    BotState(
        componentContext,
        bot = currentBot,
        index = _botIndex,
        onLoginSuccess = { index, bot ->
            miraiComposeRepository.setNullToBot(index, bot)
        }
    ).asComponent { BotStateUi(it) }
}

and the navigation inBotRcomponent

sealed class BotStatus : Parcelable {
        object NoLogin : BotStatus()
        class SolvePicCaptcha(val imageBitmap: ImageBitmap, val onSuccess: (String?) -> Unit) :
            BotStatus()

        class SolveSliderCaptcha(val url: String, val result: (String?) -> Unit) : BotStatus()
        class SolveUnsafeDeviceLoginVerify(val url: String, val result: (String?) -> Unit) : BotStatus()
        object Online : BotStatus()
}

 is BotStatus.Online ->
        BotOnline(componentContext, bot!!).asComponent { BotOnlineUi(it) }

However something wrong happened.Every time I navigate to the BotR will loss all of message I make in the BotOnlineprevious
And if I choose this way

sealed class Config : Parcelable {
        class BotR(val bot:Bot) : Config()
        object Setting : Config()
        object About : Config()
        object Log : Config()
        object Plugin : Config()
}

It will not update.I wish to know the best practice.

Answer 7 · 2021-04-21T22:26:39.000Z

I don't know how to do it...The code is here and I change to use crossfadescale()
https://github.com/sonder-joker/mirai-compose/blob/8c78c483eeff33d9d7308c26101e9bcdbca1ba3c/mirai-compose/src/main/kotlin/ui/feature/plugin/PluginsView.kt#L65

I can't verify the issue, the Plugin section is empty. I think you should wrap Children call into e.g. Box:

@Composable
fun PluginsUi(plugins: Plugins) {
    Box(Modifier.clipToBounds()) {
        Children(plugins.state, animation = slide()) { child ->
            child.instance()
        }
    }
}
```.

Answer 8 · 2021-04-21T22:35:33.000Z

Also I have some question about stack navigation.
Consider UI with video above.I have five selection text

The robot column can be choose to login many account so I make such a navigation

sealed class Config : Parcelable {
        class BotR(val bot:Bot) : Config()
        object Setting : Config()
        object About : Config()
        object Log : Config()
        object Plugin : Config()
}

is Config.BotR -> {
    BotState(
        componentContext,
        bot = currentBot,
        index = _botIndex,
        onLoginSuccess = { index, bot ->
            miraiComposeRepository.setNullToBot(index, bot)
        }
    ).asComponent { BotStateUi(it) }
}

and the navigation inBotRcomponent

sealed class BotStatus : Parcelable {
        object NoLogin : BotStatus()
        class SolvePicCaptcha(val imageBitmap: ImageBitmap, val onSuccess: (String?) -> Unit) :
            BotStatus()

        class SolveSliderCaptcha(val url: String, val result: (String?) -> Unit) : BotStatus()
        class SolveUnsafeDeviceLoginVerify(val url: String, val result: (String?) -> Unit) : BotStatus()
        object Online : BotStatus()
}

 is BotStatus.Online ->
        BotOnline(componentContext, bot!!).asComponent { BotOnlineUi(it) }

However something wrong happened.Every time I navigate to the BotR will loss all of message I make in the BotOnlineprevious
And if I choose this way

sealed class Config : Parcelable {
        class BotR(val bot:Bot) : Config()
        object Setting : Config()
        object About : Config()
        object Log : Config()
        object Plugin : Config()
}

It will not update.I wish to know the best practice.

It is not clear what are you doing and how your project works. It seems that that the BotOnline component is child of the BotState component. If so, then most likely BotOnline is recreated when you are navigating to BotState. Please provide a reproducer (or exact steps to reproduce the issue) so I could help.

Answer 9 · 2021-04-22T07:11:22.000Z

It is not clear what are you doing and how your project works. It seems that that the BotOnline component is child of the BotState component. If so, then most likely BotOnline is recreated when you are navigating to BotState. Please provide a reproducer (or exact steps to reproduce the issue) so I could help.

Consider your example project. TodoMain with some TodoItem, I wish to load the data in TodoItem in background even if I leave the TodoItem Ui(such as in TodoMain).I don't want to recreate TodoItem,I just want to recreate TodoItemUi,like viewmodel. Sorry for my poor English, if you need more detailed explain, I will create a gist later
May a Hashmap in TodoMain could solve it, but I don't think it's a good action?

Answer 10 · 2021-04-22T10:20:07.000Z

It is not clear what are you doing and how your project works. It seems that that the BotOnline component is child of the BotState component. If so, then most likely BotOnline is recreated when you are navigating to BotState. Please provide a reproducer (or exact steps to reproduce the issue) so I could help.

Consider your example project. TodoMain with some TodoItem, I wish to load the data in TodoItem in background even if I leave the TodoItem Ui(such as in TodoMain).I don't want to recreate TodoItem,I just want to recreate TodoItemUi,like viewmodel. Sorry for my poor English, if you need more detailed explain, I will create a gist later
May a Hashmap in TodoMain could solve it, but I don't think it's a good action?

What should happen when the app is restarted?

Answer 11 · 2021-04-23T12:13:40.000Z

Within a few days after answering the issue, I rethinked the design. My previous thinking was problematic.
(In the following thinking, each Componentcontext corresponds to a @composable Ui)

What I am doing is the GUI of an open source robot project. My original idea was to start subscribing to a flow (including message events) after entering OnlineBot.

                   NavHost
                      |
                      |
                      |
 -------------------------------------------
 |          |         |         |          |
 |          |         |         |          |
 Plugin     OnlineBot Setting   About      Log
 ...

For this reason, I split the project into a Login page and an OnlineBot page. When the Login page is finished logging in, I navigate to the OnlineBot
Initially I hope to enter OnlineBot at this time to start and keey subscribing the bot message flow (the question in the above part), even if I leave OnlineBot, I will continue to subscribe the bot message flow. My mistake is to subscribe the message flow in the ComponentContext of OnlineBot, but this way I navigate to After OnlineBot will re-subscribe to flow. In fact, I should subscribe to data in NavHost's ComponentContext. This example is very similar to the news bar of a news website. Should the clicked news be cached in memory? I'm not sure, but in my project, all robot data should stay in memory, so I can place it in NavHost and load it.
Now I think the question may could close.
Thanks you very much,Decompose's architecture is impressive!Decompose is an great open source project, and I look forward to it's development!

Answer 12 · 2021-04-23T12:19:22.000Z

Please keep in mind that you can integrate Sub-Components into parents directly, without using the Router. So they are still separate children, but they live in the same scope as the parent. The Counter sample has this logic. For example the Root component has navigating parts and the permanent part. Take a look here. In this case your NavHost will not be responsible for anything except orchestrating its children.

Answer 13 · 2021-04-23T12:24:04.000Z

Please keep in mind that you can integrate Sub-Components into parents directly, without using the Router. So they are still separate children, but they live in the same scope as the parent. The Counter sample has this logic. For example the Root component has navigating parts and the permanent part. Take a look here. In this case your NavHost will not be responsible for anything except orchestrating its children.

Thanks! I have miss this part. Todo project is a bit difficult to understand because of many libraries, and I only read Todo project. I will read the project!

Answer 14 · 2021-04-23T12:38:30.000Z

The Todo sample don't have this, the Counter sample does.