You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

192 lines
5.8 KiB

package com.gyf.csams
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun MyBox(modifier: Modifier, canvasSize:Dp, canvasD:Float, content: @Composable BoxScope.() -> Unit){
Box(modifier = modifier,contentAlignment = Alignment.Center){
Canvas(modifier = Modifier.size(canvasSize)) {
rotate(canvasD){
drawRect(color = Color.Cyan)
}
}
content()
}
}
@Composable
fun BoxSetSize(degrees:Float=0F, content: @Composable BoxScope.() -> Unit){
MyBox(modifier = Modifier
.height(300.dp)
.fillMaxWidth()
.background(Color.Gray)
.rotate(degrees = degrees), canvasSize = 200.dp, canvasD = 45F,content = content
)
}
@Composable
fun BoxFillSize(degrees:Float=0F, content: @Composable BoxScope.() -> Unit){
MyBox(
modifier = Modifier
.fillMaxSize()
.background(Color.LightGray), canvasSize = 100.dp, canvasD = 80F,content = content
)
}
//@Preview
@Composable
fun TestPreview(){
Column(modifier = Modifier.fillMaxSize()){
BoxSetSize {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("前置子布局固定尺寸")
}
})
}
BoxFillSize {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("后置子布局使用")
}
withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
append("fillMaxSize修饰符")
}
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("填充父项允许的所有可用空间")
}
})
}
}
}
//@Preview
@Composable
fun TestPreview2(){
Column(modifier = Modifier.fillMaxSize()){
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("如果使用示例1方法是")
}
withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
append("无法实现前置子布局填充父项所有可用空间,后置子布局固定尺寸")
}
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("因为前置布局已经填充父项允许的所有可用空间,后置子布局没有剩余空间可用")
}
})
BoxFillSize {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("前置子布局填充父项允许的所有可用空间")
}
})
}
BoxSetSize {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("后置子布局固定尺寸")
}
})
}
}
}
//@Preview
@Composable
fun TestPreview3(){
Column(modifier = Modifier
.fillMaxSize()) {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("折衷方案是通过父项旋转180°实现,子项分别旋转180°复位可")
}
withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
append("实现前置子布局填充父项所有可用空间,后置子布局固定尺寸")
}
withStyle(style = SpanStyle(fontSize = 30.sp)){
append(",除了旋转,应该有更好的实现方式?")
}
})
Column(modifier = Modifier.rotate(180F)){
BoxSetSize(degrees = 180F) {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("前置子布局固定尺寸,通过旋转和后置子布局对调位置")
}
})
}
BoxFillSize(degrees = 180F) {
Text(buildAnnotatedString {
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("后置子布局使用")
}
withStyle(style = SpanStyle(color= Color.Red,fontSize = 30.sp)){
append("fillMaxSize修饰符")
}
withStyle(style = SpanStyle(fontSize = 30.sp)){
append("填充父项允许的所有可用空间,通过旋转和前置子布局对调位置")
}
})
}
}
}
}
//@Preview
@Composable
fun TestPreview4(){
Column(modifier = Modifier
.fillMaxSize()) {
MyBox(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.background(Color.Gray), canvasSize = 100.dp, canvasD = 80F){
Text(text = "Box1")
}
MyBox(modifier = Modifier
.height(300.dp)
.fillMaxWidth()
.background(Color.Gray), canvasSize = 200.dp, canvasD = 45F){
Text(text = "Box2")
}
}
}
@Preview
@Composable
fun TestPreview5(){
Column {
Row {
}
}
}