{"id":1576,"date":"2021-06-09T15:07:12","date_gmt":"2021-06-09T07:07:12","guid":{"rendered":"http:\/\/wthee.xyz\/?p=1576"},"modified":"2021-06-09T15:07:12","modified_gmt":"2021-06-09T07:07:12","slug":"jetpack-compose-%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c\/","title":{"rendered":"Jetpack Compose \u62d6\u52a8\u6548\u679c"},"content":{"rendered":"<blockquote>\n<p>Compose \u7248\u672c\uff1a1.0.0-beta08<\/p>\n<\/blockquote>\n<h4>\u6548\u679c<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/06\/Video_20210609_030602_250.gif?w=1170&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/p>\n<h4>\u4ee3\u7801\u793a\u4f8b<\/h4>\n<ul>\n<li>\u5217\u8868\u9875\u9762<\/li>\n<\/ul>\n<pre><code class=\"\" data-line=\"\">@Composable\nfun VideoList() {\n    Column(\n        modifier = Modifier\n            .fillMaxSize()\n            .background(Color.Gray)\n            .verticalScroll(rememberScrollState())\n    ) {\n        for (i in 0..20) {\n            Card(modifier = Modifier.padding(10.dp)) {\n                Row(\n                    modifier = Modifier\n                        .background(Color.White)\n                        .fillMaxWidth()\n                        .height(70.dp)\n                ) {\n                    Box(\n                        modifier = Modifier\n                            .background(Color.DarkGray)\n                            .fillMaxWidth(0.2f)\n                            .fillMaxHeight()\n                    )\n                    Text(\n                        text = &quot;item $i&quot;,\n                        color = Color.Black,\n                        modifier = Modifier\n                            .weight(0.8f)\n                            .fillMaxHeight()\n                    )\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n<ul>\n<li>\u8be6\u60c5\u9875\u9762<\/li>\n<\/ul>\n<pre><code class=\"\" data-line=\"\">\n@ExperimentalAnimationApi\n@RequiresApi(Build.VERSION_CODES.R)\n@Composable\nfun PlayerPage() {\n    \/\/\u62d6\u52a8\u8ddd\u79bb\n    val offsetY = remember {\n        mutableStateOf(0f)\n    }\n    \/\/\u83b7\u53d6\u8bbe\u5907\u4fe1\u606f\n    val outMetrics = DisplayMetrics()\n    val display = LocalContext.current.display\n    display?.getRealMetrics(outMetrics)\n    val scale: Float = LocalContext.current.resources.displayMetrics.density\n    val deviceWidth = (outMetrics.widthPixels \/ scale + 0.5f).toInt().dp\n    val deviceHeight = (outMetrics.heightPixels \/ scale + 0.5f).toInt().dp\n    \/\/\u5173\u952e\u5e27\n    val keyframe0 = deviceHeight \/ 3\n    val keyframe1 = deviceHeight - playerHeight\n    \/\/\u9875\u9762\u72b6\u6001\n    val playerState = remember {\n        mutableStateOf(PlayerState.EXPAND)\n    }\n\n    \/\/\u5bbd\u5ea6\u53d8\u5316\n    val widthAnim = animateDpAsState(\n        targetValue = when {\n            offsetY.value &lt; keyframe1.value -&gt; {\n                deviceWidth\n            }\n            else -&gt; {\n                miniPlayerWidth\n            }\n        }\n    )\n\n    \/\/\u9ad8\u5ea6\u53d8\u5316\n    val heigtAnim = animateDpAsState(\n        targetValue = when {\n            offsetY.value &lt; keyframe1.value -&gt; {\n                playerState.value = PlayerState.HALF\n                (deviceHeight.value - offsetY.value).dp\n            }\n            else -&gt; {\n                playerState.value = PlayerState.MINI\n                miniPlayerHeight\n            }\n        }\n    )\n\n    Column(\n        modifier = Modifier\n            .padding(if (playerState.value == PlayerState.MINI) 10.dp else 0.dp)\n            .height(heigtAnim.value)\n            .draggable(\n                state = rememberDraggableState {\n                    offsetY.value += it\n                },\n                orientation = Orientation.Vertical,\n                onDragStopped = {\n                    \/\/\u505c\u6b62\u65f6\uff0c\u6839\u636e\u62d6\u52a8\u8ddd\u79bb\uff0c\u6539\u53d8\u72b6\u6001\n                    if (playerState.value == PlayerState.HALF) {\n                        if (offsetY.value &gt; keyframe0.value \/ 2) {\n                            offsetY.value = keyframe0.value\n                        } else {\n                            offsetY.value = 0f\n                        }\n                    }\n                }\n            )\n    ) {\n        Row(\n            horizontalArrangement = Arrangement.End,\n            modifier = Modifier\n                .background(Color.White)\n                .border(width = 1.dp, color = Color.Black)\n                .fillMaxWidth(),\n            verticalAlignment = Alignment.CenterVertically\n        ) {\n            Box(\n                modifier = Modifier\n                    .background(Color.Black)\n                    .height(playerHeight)\n                    .width(widthAnim.value)\n            ) {\n                Text(text = &quot;Player&quot;, modifier = Modifier.align(Alignment.Center))\n            }\n            Text(text = &quot;video 123&quot;, modifier = Modifier.weight(1f))\n            Icon(\n                imageVector = Icons.Default.PlayArrow,\n                contentDescription = null,\n                modifier = Modifier.weight(1f)\n            )\n        }\n\n        Column(\n            modifier = Modifier\n                .fillMaxSize()\n                .background(Color.White)\n        ) {\n            Text(\n                text = &quot;summary 123&quot;, modifier = Modifier\n                    .padding(10.dp)\n            )\n        }\n    }\n}<\/code><\/pre>\n<ul>\n<li>\u4f7f\u7528<\/li>\n<\/ul>\n<pre><code class=\"\" data-line=\"\">\nval miniPlayerHeight = 50.dp\nval miniPlayerWidth = 100.dp\nval playerHeight = 350.dp\n\nenum class PlayerState {\n    EXPAND, MINI, HALF\n}\n\nclass MainActivity : ComponentActivity() {\n    @ExperimentalAnimationApi\n    @RequiresApi(Build.VERSION_CODES.R)\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent {\n            PermissionTheme {\n                Surface(color = MaterialTheme.colors.background) {\n                    Box(\n                        modifier = Modifier.fillMaxSize(),\n                        contentAlignment = Alignment.BottomCenter\n                    ) {\n                        VideoList()\n                        PlayerPage()\n                    }\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5229\u7528 Modifier.draggable \u76d1\u542c\u62d6\u52a8\u8ddd\u79bb\uff0c\u5b9e\u73b0\u62d6\u52a8\u6548\u679c<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":""},"categories":[3,19],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pcwHG0-pq","jetpack-related-posts":[{"id":1573,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e5%ae%9e%e7%8e%b0%e6%bb%91%e5%8a%a8%e6%8a%98%e5%8f%a0%e6%95%88%e6%9e%9c\/","url_meta":{"origin":1576,"position":0},"title":"Jetpack Compose \u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u6548\u679c","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5229\u7528 rememberScrollState() \uff0c\u5b9e\u73b0\u6ed1\u52a8\u6298\u53e0\u7684\u6548\u679c","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1563,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-chipgroup\/","url_meta":{"origin":1576,"position":1},"title":"Jetpack Compose ChipGroup","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5b9e\u73b0 ChipGroup \u7ec4\u4ef6","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1579,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/09\/jetpack-compose-navigation-%e7%9a%84%e4%bd%bf%e7%94%a8\/","url_meta":{"origin":1576,"position":2},"title":"Jetpack Compose Navigation \u7684\u4f7f\u7528","author":"wthee","date":"2021\u5e746\u67089\u65e5","format":false,"excerpt":"Compose \u7248\u672c\uff1a1.0.0-beta08 Navigation \u7248\u672c\uff1a2.4.0-alpha0\u2026","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1569,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e6%9d%83%e9%99%90%e7%94%b3%e8%af%b7\/","url_meta":{"origin":1576,"position":3},"title":"Jetpack Compose \u6743\u9650\u7533\u8bf7","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"\u5728 Jetpack Compose \u4e2d\uff0c\u7533\u8bf7\u6743\u9650\u7684\u4e00\u79cd\u65b9\u5f0f","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1555,"url":"https:\/\/wthee.xyz\/index.php\/2021\/05\/31\/jetpack-compose-%e5%85%a5%e9%97%a8%e5%bf%85%e7%9c%8b%e7%9a%84%e6%96%87%e6%a1%a3-%e9%a1%b9%e7%9b%ae\/","url_meta":{"origin":1576,"position":4},"title":"Jetpack Compose \u5165\u95e8\u5fc5\u770b\u7684\u6587\u6863\/\u9879\u76ee","author":"wthee","date":"2021\u5e745\u670831\u65e5","format":false,"excerpt":"Jetpack Compose \u76f8\u5173\u7684\u4e00\u4e9b\u6587\u6863\/\u9879\u76ee\u6c47\u603b","rel":"","context":"\u5728\u201cJetpack Compose\u201d\u4e2d","block_context":{"text":"Jetpack Compose","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/jetpack-compose\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/wthee.xyz\/wp-content\/uploads\/2021\/05\/jetpack_compose.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1571,"url":"https:\/\/wthee.xyz\/index.php\/2021\/06\/08\/jetpack-compose-%e4%bd%bf%e7%94%a8-coil-%e5%8a%a0%e8%bd%bd%e5%9b%be%e7%89%87\/","url_meta":{"origin":1576,"position":5},"title":"Jetpack Compose \u4f7f\u7528 Coil \u52a0\u8f7d\u56fe\u7247","author":"wthee","date":"2021\u5e746\u67088\u65e5","format":false,"excerpt":"Accompanist \u63d0\u4f9b\u4e86\u6613\u4e8e\u4f7f\u7528\u7684 Painter\uff0c\u5b83\u53ef\u4ee5\u4f7f\u7528 Coil \u56fe\u50cf\u52a0\u8f7d\u5e93\u4ece\u5916\u90e8\u6765\u6e90\u2026","rel":"","context":"\u5728\u201cAndroid \u5f00\u53d1\u201d\u4e2d","block_context":{"text":"Android \u5f00\u53d1","link":"https:\/\/wthee.xyz\/index.php\/category\/android\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1576"}],"collection":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1576"}],"version-history":[{"count":1,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":1578,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/posts\/1576\/revisions\/1578"}],"wp:attachment":[{"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wthee.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}