{"id":237,"date":"2024-10-10T11:50:55","date_gmt":"2024-10-10T03:50:55","guid":{"rendered":"https:\/\/newstrong.xyz\/?p=237"},"modified":"2024-10-10T11:50:55","modified_gmt":"2024-10-10T03:50:55","slug":"compose-%e5%8a%a8%e7%94%bb-%e4%b8%89-animatedvisibility-%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e6%b7%b1%e5%85%a5%ef%bc%8c%e5%ae%9e%e7%8e%b0%e7%bb%84%e4%bb%b6%e7%9a%84%e9%9a%90%e8%97%8f%e5%92%8c","status":"publish","type":"post","link":"https:\/\/newstrong.top\/index.php\/2024\/10\/10\/compose-%e5%8a%a8%e7%94%bb-%e4%b8%89-animatedvisibility-%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e6%b7%b1%e5%85%a5%ef%bc%8c%e5%ae%9e%e7%8e%b0%e7%bb%84%e4%bb%b6%e7%9a%84%e9%9a%90%e8%97%8f%e5%92%8c\/","title":{"rendered":"Compose \u52a8\u753b (\u4e09) : AnimatedVisibility \u4ece\u5165\u95e8\u5230\u6df1\u5165\uff0c\u5b9e\u73b0\u7ec4\u4ef6\u7684\u9690\u85cf\u548c\u663e\u793a"},"content":{"rendered":"

\n <\/path>\n <\/svg><\/p>\n

                
<\/code><\/pre>\n
<\/a>1. AnimatedVisibility \u662f\u4ec0\u4e48<\/h3>\n<\/p>\n
AnimatedVisibility<\/code>\u662fAndroid Compose<\/code>\u4e2d\u7684\u4e00\u4e2a\u9ad8\u7ea7\u522b\u52a8\u753bAPI<\/code>\u3002
 \u53ef\u4ee5\u5b9e\u73b0Compose\u7ec4\u4ef6<\/code>\u7684\u663e\u793a\u548c\u9690\u85cf\uff0c\u5e76\u4e14\u53ef\u4ee5\u6307\u5b9a\u663e\u793a\/\u9690\u85cf\u65f6\u5019\u7684\u52a8\u753b\u6548\u679c\u3002(EnterTransition\/ExitTransition<\/code>)
 \u548c animateXxxAsState<\/a>\u3001animateContentSize<\/code>\u3001Crossfade<\/code>\u3001AnimatedContent<\/code> \u8fd9\u51e0\u4e2aAPI\u4e00\u8d77\uff0c\u90fd\u662fCompose<\/code>\u7684\u9ad8\u7ea7\u522b\u52a8\u753bAPI\uff0c\u662f\u6bd4\u8f83\u6613\u7528\u7684\u3002<\/p>\n
\n<\/a>2. AnimatedVisibility \u7684\u57fa\u7840\u4f7f\u7528<\/h3>\n
@Composable<\/span>\nfun<\/span> AnimatedVisibilityPage<\/span>(<\/span>)<\/span> {<\/span>\n    Column<\/span>(<\/span>horizontalAlignment =<\/span> Alignment.<\/span>CenterHorizontally)<\/span> {<\/span>\n        var<\/span> visible by<\/span> remember {<\/span>\n            mutableStateOf<\/span>(<\/span>true<\/span>)<\/span>\n        }<\/span>\n        AnimatedVisibility<\/span>(<\/span>visible =<\/span> visible)<\/span> {<\/span>\n            MyImage<\/span>(<\/span>)<\/span>\n        }<\/span>\n        Spacer<\/span>(<\/span>modifier =<\/span> Modifier.<\/span>height<\/span>(<\/span>10<\/span>.<\/span>dp)<\/span>)<\/span>\n        Button<\/span>(<\/span>onClick =<\/span> {<\/span> visible =<\/span> !<\/span>visible }<\/span>)<\/span> {<\/span>\n            Text<\/span>(<\/span>text =<\/span> \"\u663e\u793a\/\u9690\u85cf\"<\/span><\/span>)<\/span>\n        }<\/span>\n    }<\/span>\n}<\/span>\n\n@Composable<\/span>\nprivate<\/span> fun<\/span> MyImage<\/span>(<\/span>)<\/span> {<\/span>\n    Image<\/span>(<\/span>\n        painter =<\/span> painterResource<\/span>(<\/span>id =<\/span> R.<\/span>mipmap.<\/span>photot1)<\/span>,<\/span>\n        modifier =<\/span> Modifier.<\/span>width<\/span>(<\/span>300<\/span>.<\/span>dp)<\/span>,<\/span>\n        contentDescription =<\/span> null<\/span>\n    )<\/span>\n}<\/span>\n<\/code><\/pre>\n
\u770b\u4e0a\u53bb\u662f\u4e0d\u662f\u5f88\u7b80\u5355\uff0c\u53ea\u9700\u8981\u5728Image<\/code>\u5916\u5c42\u5305\u4e0aAnimatedVisibility<\/code>\u5c31\u53ef\u4ee5\u4e86\uff0c\u663e\u793a\u6548\u679c\u5982\u4e0b
 
 \u6211\u4eec\u70b9\u8fdbAnimatedVisibility<\/code>\u7684\u6e90\u7801\uff0c\u53ef\u4ee5\u770b\u5230\u5982\u4e0b\u4ee3\u7801<\/p>\n
@Composable<\/span>\nfun<\/span> ColumnScope.<\/span>AnimatedVisibility<\/span>(<\/span>\n    visible:<\/span> Boolean,<\/span>\n    modifier:<\/span> Modifier =<\/span> Modifier,<\/span>\n    enter:<\/span> EnterTransition =<\/span> fadeIn<\/span>(<\/span>)<\/span> +<\/span> expandVertically<\/span>(<\/span>)<\/span>,<\/span>\n    exit:<\/span> ExitTransition =<\/span> fadeOut<\/span>(<\/span>)<\/span> +<\/span> shrinkVertically<\/span>(<\/span>)<\/span>,<\/span>\n    label:<\/span> String =<\/span> \"AnimatedVisibility\"<\/span><\/span>,<\/span>\n    content:<\/span> @Composable<\/span> AnimatedVisibilityScope.<\/span>(<\/span>)<\/span> -><\/span> Unit\n)<\/span>{<\/span>\n    val<\/span> transition =<\/span> updateTransition<\/span>(<\/span>visible,<\/span> label)<\/span>\n    AnimatedEnterExitImpl<\/span>(<\/span>transition,<\/span> {<\/span> it }<\/span>,<\/span> modifier,<\/span> enter,<\/span> exit,<\/span> content)<\/span>\n}<\/span>\n<\/code><\/pre>\n
\u53ef\u4ee5\u53d1\u73b0\u5176\u5185\u90e8\u8c03\u7528\u4e86updateTransition<\/code>\uff0c\u8be5\u51fd\u6570\u5185\u90e8\u4f1a\u8fd4\u56deTransition<\/code>\u5bf9\u8c61\u3002<\/p>\n
@Composable<\/span>\nfun<\/span> <<\/span>T><\/span> updateTransition<\/span>(<\/span>\n    targetState:<\/span> T,<\/span>\n    label:<\/span> String?<\/span> =<\/span> null<\/span>\n)<\/span>:<\/span> Transition<<\/span>T><\/span> {<\/span>\n    \/\/...\u7701\u7565...<\/span>\n}<\/span>\n<\/code><\/pre>\n
Transition<\/code>\u53ef\u7ba1\u7406\u4e00\u4e2a\u6216\u591a\u4e2a\u52a8\u753b\u4f5c\u4e3a\u5176\u5b50\u9879\uff0c\u5e76\u5728\u591a\u4e2a\u72b6\u6001\u4e4b\u95f4\u540c\u65f6\u8fd0\u884c\u8fd9\u4e9b\u52a8\u753b\u3002
 \u8fd9\u4e2a\u6211\u4eec\u540e\u7eed\u6587\u7ae0\u4f1a\u8bb2\u5230\uff0c\u73b0\u5728\u5148\u77e5\u9053\u6709\u8fd9\u6837\u4e00\u4e2a\u6982\u5ff5\u5c31\u597d\u3002<\/p>\n
\n<\/a>3. \u5165\u573a\u548c\u51fa\u573a\u52a8\u753b<\/h3>\n
enter<\/code>\u548cexit<\/code>\uff0c\u7528\u6765\u914d\u7f6e\u5165\u573a\/\u51fa\u573a<\/code>\u65f6\u5019\u7684\u52a8\u753b\u6548\u679c\u3002<\/p>\n
\u9ed8\u8ba4\u7684\u5165\u573a\u6548\u679c\u662f fadeIn() + expandVertically()<\/code>
 \u9ed8\u8ba4\u7684\u51fa\u573a\u6548\u679c\u662f fadeOut() + shrinkVertically()<\/code><\/p>\n
\n<\/a>1. EnterTransition<\/code>\u548cExitTransition<\/code>\u652f\u6301\u7684\u52a8\u753b<\/h4>\n
enter<\/code>\u7684\u53c2\u6570\u7c7b\u578b\u662fEnterTransition<\/code>\uff0c\u652f\u6301\u8fd9\u4e9b\u52a8\u753b<\/p>\n