网站做支付接口吗,微信小程序开挂方法,大埔做网站,购物网站首页设计如标题所言#xff0c;就是一篇学习笔记而已#xff0c;没有看的必要#xff0c;只是写给自己看的#xff0c;内容是慢慢更新的。 因为白天要上班#xff0c;有时还会加班。而我自己也经常写一些个人项目#xff0c;还会花时间玩游戏#xff0c;而且现在所在的公司也不会…如标题所言就是一篇学习笔记而已没有看的必要只是写给自己看的内容是慢慢更新的。 因为白天要上班有时还会加班。而我自己也经常写一些个人项目还会花时间玩游戏而且现在所在的公司也不会用compose去开发所以就慢慢学慢慢记。
Build
必须在build文件的android下面设置下面的属性
buildFeatures {compose true
}compose的依赖这些是android studio自动生成的每个的作用不清楚
implementation androidx.activity:activity-compose:1.5.1
implementation androidx.compose.ui:ui
implementation androidx.compose.ui:ui-graphics
implementation androidx.compose.ui:ui-tooling-preview
implementation androidx.compose.material3:material3在构建时可能会由于kotlin版本的问题而构建失败按照提示修改为合适的版本即可
Activity
compose必须继承哪个Activity还不清楚android studio生成的代码继承的是androidx.activity.ComponentActivity。 这个Activity与其他的ComponentActivity有所不同代码已经是不一样的。而且setContent这个方法就是这个ComponentActivity的扩展方法。 建议直接用这个Activity下面是使用原生Activity的情况出现了很多问题。最终结果是失败的如果不想看这个过程可以跳过这部分。
compose还提供了一个ComposeView。 先看看ComposeView的注释 Composes the given composable into the given activity. The content will become the root view of the given activity. This is roughly equivalent to calling ComponentActivity.setContentView with a ComposeView i.e.:
setContentView(ComposeView(this).apply {setContent {MyComposableContent()}}
)如果在Activity直接使用这个View会抛出“IllegalStateException: ViewTreeLifecycleOwner not found from androidx.compose.ui.platform.ComposeView”。 经过测试如果只是new而没有调用setContentView就没有这个异常说明是setContentView调用了View的某段代码出现的。 阅读源码后发现问题是出在ComposeView的onAttachedToWindow方法上在这个方法里面最终会调用WindowRecomposer.android.kt:349这行代码检查是否设置了Lifecycle。 这行代码所在的方法有一个Lifecycle参数这里应该是空的所以是调用ViewTreeLifecycleOwner.kt的View.findViewTreeLifecycleOwner获取的。 最终获取到的值也是空的所以就抛出异常。在这个kt文件也可以看到它还提供了set方法所以可以调用set方法设置Lifecycle。但设置之后出现了新的问题。 这次没有报Lifecycle的异常了但有了新的异常“IllegalStateException: Composed into the View which doesn’t propagateViewTreeSavedStateRegistryOwner!”。 阅读代码之后发现是少了SavedStateRegistryOwner。这个是调用了AndroidComposeView.android.kt的代码这个文件里面同样有一个set方法。 同样的套路设置不过这个不能像Lifecycle那样直接设置。我的做法是实现SavedStateRegistryOwner此时需要在savedStateRegistry返回一个SavedStateRegistry。 本来想要直接new的但发现构造方法是internal。然后我在源码中发现可以这样获取SavedStateRegistryController.create(this).savedStateRegistry。 经过一番折腾后项目总算不抛异常了。但是当调用ComposeView的setContent方法添加View之后。会发现View并没有显示在屏幕上。 所以还要看看怎么样才能显示出来这个我就不折腾了这个难度比找异常大多了。 所以可以发现除非有什么定制需求或者自己对这块已经了然于心否则没事不要用Activity去玩compose。 看一下最终代码
override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)val composeView ComposeView(this)composeView.setViewTreeLifecycleOwner(this)composeView.setViewTreeSavedStateRegistryOwner(this)composeView.setContent {Text(text text)}setContentView(composeView, ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT))
}
override val lifecycle: Lifecycle LifecycleRegistry(this)
override val savedStateRegistry: SavedStateRegistry SavedStateRegistryController.create(this).savedStateRegistry而如果是继承ComponentActivity就会发现很简单
setContentView(ComposeView(this).apply {setContent {Text(text text)}
})不过都继承ComponentActivity了那就没有太大的必要使用这个了。而且在setContent的代码里面还加了很多处理compose的代码。
然后有一点需要注意compose的ComponentActivity和非compose的ComponentActivity是不一样的。 虽然两者的包名一样但实现的类是不完全一样的。 如果没有使用compose那ComponentActivity是这样的
public class ComponentActivity extends androidx.core.app.ComponentActivity implementsLifecycleOwner,ViewModelStoreOwner,SavedStateRegistryOwner,OnBackPressedDispatcherOwner{// ...
}而如果引入compose的ComponentActivity依赖则是
public class ComponentActivity extends androidx.core.app.ComponentActivity implementsContextAware,LifecycleOwner,ViewModelStoreOwner,HasDefaultViewModelProviderFactory,SavedStateRegistryOwner,OnBackPressedDispatcherOwner,ActivityResultRegistryOwner,ActivityResultCaller,OnConfigurationChangedProvider,OnTrimMemoryProvider,OnNewIntentProvider,OnMultiWindowModeChangedProvider,OnPictureInPictureModeChangedProvider,MenuHost{// ...
}实现的类明显多了。
使用
在setContent里面可以调用带有Composable注解的方法来构建UI。 google自带的compose方法都是大写开头猜测是为了让开发者能够快速看出是compose方法。 可以在compose方法上面使用Preview注解用来预览界面。但使用该注解的compose方法必须没有参数否则没办法预览。 code
// 这样就能够显示 hello world
setContent {Text(text hello world)
}// 如果希望可以预览可以这样
setContent {HelloWorldPreview()
}Preview
Composable
fun HelloWorldPreview() {Text(text hello world)
}如果想要预览可以在Activity的右上角点击Split如果compose没有及时更新可以在预览界面的右上角找到Build Refresh。 一个元素想要预览必须在没有参数的方法里面编写界面如果一个方法有参数是没办法预览的官方文档就是这样写的。
布局
把布局放在控件前面是因为常用布局不多而且还需要通过布局引出ModifierModifier也是compose重要的组成部分。 Modifier无论是在布局还是控件上都有重要的作用。 默认的布局
setContent{Message()
}Preview
Composable
fun Message() {Text(Text1)Text(Text2)
}这段代码会在内容视图中创建两个文本元素。不过由于您未提供有关如何排列这两个文本元素的信息因此它们会相互重叠使文本无法阅读。 Column
setContent {Column {Message()}
}Column函数可以垂直排列控件。Column方法有4个参数分别是Modifier、Arrangement.Vertical、Alignment.Horizontal和content。 Modifier功能强大下面再说。content就是显示控件不用说。 Arrangement.Vertical和Alignment.Horizontal和content从名字就可以看出是指定子控件的位置。 比如给Arrangement.Vertical设置一个Arrangement.Bottom所有子控件就会在底部。给Alignment.Horizontal设置一个Alignment.End所有子控件就会在屏幕右边。 两者的默认值分别是Top和Start所以不指定该参数时子元素就显示在左上角。 在设置这两个参数时还需要设置Modifier可以将Column大小设置为最大Modifier.fillMaxSize()这样才能看到实际效果。如果不设置相当于宽高都为WRAP_CONTENT。 Row
setContent {Row {Message()}
}Row函数可以水平排列元素。Row的参数和Column差不多只是第2个和第3个参数变成了Arrangement.Horizontal和Alignment.Vertical。 用法上和Column差不多。默认值和Column一样也是Top和Start。 Box
setContent {Box {Message()}
}这个有点像RelativeLayout如果配合Modifier使用好像功能会变得很强大。我在官方文档看到很多示例代码但不知道那些代码的作用后面再看看吧。 Box第2个参数和第3个参数分别为Alignment和propagateMinConstraints: Boolean。两个的默认值分别为Alignment.TopStart和false。 Alignment和Column和Row有点不一样但也没有太大区别。该对象可以指定CenterEnd、BottomStart等参数看名称也知道是什么意思不用解释。 propagateMinConstraintsWhether the incoming min constraints should be passed to content. TODO测试了一下设置为true之后即使size为最大还是没办法显示在屏幕底部。这个参数应该会影响大小但不敢肤浅地就这样下定论所以会好好查一下这个参数的真正作用。
不同测量单位
在将Modifier之前先搞定这个这个不止能用在Modifier文本大小也需要用到。 在layout文件里面通常想要指定大小为dp时只需在数字后面写上dp即可。而java/kotlin方面则需要获取屏幕宽度换算或者使用TypedValue.applyDimension计算。 而在compose里面这两种方式都用不了。需要使用Dp对象Sp需要使用TextUnit对象。
// dp
Dp(100f)
100f.dp
// sp
100f.sp
// em
100f.emsp和em用的都是TextUtil对象没办法直接new只能用扩展变量。 上面声明时都是用Float类型实际上除了第一个使用new的方式像100f.dp这种还有Int和Double两种声明方式。 Dp为plus、minus、unaryMinus、div和times编写了operator所以可以直接使用、-、*和/这些符号操作dp。 对于plus和minus来说需要传入一个Dp对象。times可以Int和Float。div可以Int、Float和Dp对象。unaryMinus则是在数字前面加上-“。 Dp里面还有Dp.Hairline、Dp.Infinity和Dp.Unspecified可以使用。 sp和em用的是TextUtil所以看看TextUtil。TextUtil有unaryMinus、times和div。 times和div都有Int、Float和Double3个参数。 无论是Dp还是TextUtil都实现了Comparable所以可以还能使用compareTo或者”来比较两个的值大小。 DpSize 除了上面提到的dp和spcompose还提供了DpSizeDpSize可以用在Modifier里面。 DpSize有两个参数分别是width和height都是Dp类型。可以通过dpSize.width和dpSize.height分别获取宽高。 DpSize也提供了plus、minus、times和div用来操作DpSize提供了copy用于深拷贝。除此之外还提供了component1和component2。所以可以这样获取宽高。
val (width, height) DpSize(100.dp, 100.dp)DpOffset 这个目前不知道有什么用但被我看到了就提出来。DpOffset两个参数分别为x和y。operator有plus和minus也有copy方法其他方法就没有了。 DpRect 有4个初始参数分别是left、top、right、bottom。DpRect还提供了一个有两个参数的构造方法为origin: DpOffset, size: DpSize。 DpRect只有参数没有其他方法。DpRect是一个data class所以可以这样获取left、top、right、bottom。
val (left, top, right, bottom) DpRect()DpRect有3个扩展字段width、height、sizesize返回的是一个DpSize对象。
Modifier
在xml编写View时可以给一个View指定background、size、padding等参数到了compose这一切都交给了Modifier所以我才在上面提到这个的功能很强大。 首先需要知道一件事Modifier可以链式调用。比如Modifier.fillMaxSize().background(Color.Black)。指定了maxSize和background。 知道了Modifier可以这样使用之后就会发现Modifier是很强大的可以调用Modifier不同的方法组合出不同的效果。
Modifier.size(100.dp, 100.dp)控件
自定义View
