Android UI框架Compose 的布局组件

Android UI框架Compose 的布局组件

一：Row和Column和Box

Box 组件
Box 是一个能够将里面的子项依次按照顺序堆叠的布局组件。

@Composable
inline fun Box(
//修饰符
    modifier: Modifier = Modifier,
//对齐方式
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
){
}

Row组件

@Composable
inline fun Row(
//修饰符
    modifier: Modifier = Modifier,
//水平对齐方式
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
//垂直对齐方式
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
){
}

horizontalArrangement 设置水平方向上的子view跟主轴的关系。默认是水平放置子view，居左开始布局Arrangement.Start。主要有如下几种取值

Arrangement.START 水平放置子对象，使其尽可能靠近主轴左边。
Arrangement.END 水平放置子对象，使其尽可能靠近主轴右边。
Arrangement.CENTER 水平放置子对象，使其尽可能靠近主轴的中间。
Arrangement.SpaceBetween 水平放置子对象时，使它们沿主轴均匀分布，在第一个子对象之前或最后一个子对象之后没有可用空间。意思是第一个在最左边，最后一个在最右部。而中间的按同等间隔去均分放置。
Arrangement.SpaceEvenly 水平放置子对象，使他们同等间隔均分放置
Arrangement.SpaceAround 水平放置子对象，第一个放置在距离顶部x间隔的地方，最后一个放置在距离底部x间隔的地方。中间的按同等间距均分放置。

Column组件
Column 是一个布局组件，它能够将里面的子项按照从上到下的顺序垂直排列。

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
//高度，那么就能使用 verticalArrangement 参数来定位子项在 Column 中的垂直位置。
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
//宽度，那么就能使用 horizontalAlignment 参数来定位子项在 Column 中的水平位置
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
){
}

二：Compose-Modifier(基础)

Modifier是一个装饰或者添加行为的有序的，不变的集合，例如background、padding 、宽高、焦点点击事件等。或者给Text设置单行、给Button设置各种点击状态等行为。其实就是所有控件的通用属性都在Modifier中。

1.Modifier.width(100.dp)
2.Modifier.height(100.dp)
3.Modifier.size(100.dp,100.dp)
设置自身的高度，单位dp，值可以被覆盖
4.Modifier.background(Color.Blue)//设置背景色
5.Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)//设置阴影，阴影大小，形状，是否裁剪clip = elevation>0
6.Modifier.alpha(alpha: Float)//设置透明度
7.Modifier.clip(shape: Shape)//设置切角shape
8.Modifier.border(width: Dp, color: Color, shape: Shape)//设置设置边框宽度width，颜色color，边框形状shape
9.Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp)//等效于"android:padding",偏移出父控件会被裁剪

Modifier类调用不同的修饰函数
1.clickable 使得可组合响应用户输入

//第一种
Modifier.background(Color.Blue).size(100.dp).shadow(15.dp, RectangleShape).clickable(){
                                                                                                                                
                }
//第二种

 modifier = Modifier.background(Color.Blue).size(100.dp)
                    .shadow(15.dp, RectangleShape).combinedClickable(
                        onClick = {
                            //单击

                        },
                        onDoubleClick = {
                            //双击

                        },
                        onLongClick = {
                            //长按

                        }

                    ),

2.padding 在元素周围流出控件
3.fillMaxWidth 使得可组合项填充其父项为它提供最大宽度

三：Scaffold(脚手架)

@ExperimentalMaterial3Api
@Composable
fun Scaffold(
//布局装饰
    modifier: Modifier = Modifier,
//屏幕顶部的标题栏
    topBar: @Composable () -> Unit = {},
//屏幕底部的标题栏
    bottomBar: @Composable () -> Unit = {},
//用来展示SnackBar的一个组件
    snackbarHost: @Composable () -> Unit = {},
//悬浮按钮
    floatingActionButton: @Composable () -> Unit = {},
//    悬浮按钮在屏幕上的位置
    floatingActionButtonPosition: FabPosition = FabPosition.End,
//脚手架组件内容的背景色
    containerColor: Color = MaterialTheme.colorScheme.background,
//脚手架组件内容的背景色
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
/脚手架中的组件
    content: @Composable (PaddingValues) -> Unit
){

}

 @OptIn(ExperimentalMaterial3Api::class)
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    @Composable
    fun scaffold() {
        val scope = rememberCoroutineScope()
        Scaffold(
            modifier = Modifier,
            topBar = {//屏幕顶部的标题栏
                TopAppBar(
                    title = {
                        Text("脚手架")
                    },
                    navigationIcon = {
                        Icon(
                            imageVector = Icons.Default.Menu,
                            contentDescription = "Menu",
                            tint = Color.Black
                        )
                    })
            },
            bottomBar = {
                BottomAppBar(content = {
                })

            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    content = { Text("点击") },
                    onClick = {
                        scope.launch { }
                    })
            },
            //悬浮按钮位于屏幕的

            floatingActionButtonPosition = FabPosition.End,

            content = {
                ContentText()
            }


        )
    }

    @Composable
    fun ContentText() {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            Text(text = "Content", color = Color.Black)
        }
    }

四：Spacer空白组件，TopAppBar头组件，BottomAppBar底布局

Spacer空白布局

@Composable
@NonRestartableComposable
fun Spacer(modifier: Modifier) {
    Layout({}, measurePolicy = SpacerMeasurePolicy, modifier = modifier)
}

//用法
Spacer(modifier=Modifier.width(20.dp))

TopAppBar头部布局

@ExperimentalMaterial3Api
@Composable
fun TopAppBar(
//标题
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
//左边图标
    navigationIcon: @Composable () -> Unit = {},
//右边图标
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)


//栗子
TopAppBar(
                    title = {
                        Text("脚手架")
                    },
                    navigationIcon = {
                        Icon(
                            imageVector = Icons.Default.Menu,
                            contentDescription = "Menu",
                            tint = Color.Black
                        )
                    },
                actions = {
                    IconButton(onClick = {}){
                        Icon(Icons.Filled.Search,null)
                    }
                    IconButton(onClick = {}){
                        Icon(Icons.Filled.MailOutline,null)
                    }
                })

BottomAppBar 脚布局

@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
)

//栗子
bottomBar = {
                NavigationBar() {
                    NavigationBarItem(
                        icon = {
                            Icon(
                                imageVector = Icons.Filled.Home,
                                contentDescription = null
                            )
                        },
                        onClick = {},
                        selected = true
                    )

                }

            },

NavigationBar 底部布局

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
){

}

//栗子
 bottomBar = {
                NavigationBar() {
                    NavigationBarItem(
                        icon = {
                            Icon(
                                imageVector = Icons.Filled.Search,
                                contentDescription = null
                            )
                        },
                        onClick = {},
                        selected = true
                    )
                    NavigationBarItem(
                        icon = {
                            Icon(
                                imageVector = Icons.Filled.Home,
                                contentDescription = null
                            )
                        },
                        onClick = {},
                        selected = true
                    )

                }

            },

五：FloatingActionButton组件

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit,
)

栗子：
  floatingActionButton = {
                ExtendedFloatingActionButton(
                    content = { Text("点击") },
                    onClick = {
                        scope.launch { }
                    })
            },
            //悬浮按钮位于屏幕的

            floatingActionButtonPosition = FabPosition.End,

小知识：
Android Studio Adb connection Error 导致一直弹USB调试或断了连上
解决：
ile -- Settings -- Build, Extension, Deployment -- Debugger下面的 Enable adb mDNS for wireless debugging勾勾去掉
大概意思就是开启无线调试，把它去掉就行了。