Android Compose UI 控件

相关组件

1. 文本等基础控件

Text：用于呈现文本的控件。
TextField：可以让用户输入文本的控件。
TextButton：实现文本按钮
Button：用于执行操作的控件。
Image：用于显示图像的控件。
Card：用于呈现卡片式布局的控件。
FloatingActionButton： 实现浮动操作按钮
Divider：用于绘制分割线，可以在Column和Row中使用。
OutlinedButton：实现带边框的按钮
Checkbox：实现多选框
RadioGroup：实现单选框
DatePicker：用于选择日期。
Slider：实现滑动条
Tooltip: 文本提示框。
RadioButton: 单选框。
Switch: 开关按钮。
Snackbar：用于在屏幕底部显示消息的控件。
SurfaceView：用于在应用中显示视频的控件，支持播放本地视频和网络视频。

2. 布局控件

Scaffold：可以将应用程序的基本UI元素包装在一起的控件，实现 Material Design 风格的屏幕布局。
Row: 横排布局，用于将子控件水平排列
Column: 是竖排布局，用于将子控件垂直排列
Box：类似于 FrameLayout，可以用于布局或者装饰,用于在自由布局中控制位置、大小和绘制顺序等
LazyColumn：垂直滚动列表
LazyRow：水平滚动列表
LazyVerticalGrid：垂直滚动网格
LazyHorizontalGrid：水平滚动网格
Pager：分页控件
ViewPager: 用于滑动切换多个页面的控件
ViewPager2：用于创建可左右滑动的页面。
Tab：用于在选项卡之间切换的控件。

3.进度条控件

ProgressBar：实现进度条
ProgressIndicator：用于显示进度的控件，提供了多种样式，如环形进度条、线性进度条等。
LinearProgressIndicator: 线性进度指示器
CircularProgressIndicator:圆形进度指示器，圆形进度条。
LinearProgressIndicator：线性进度条

4.导航控件

BottomNavigation：实现底部导航栏
Compose Dropdown Menu：提供了下拉菜单控件。
BottomAppBar：用于底部应用程序栏。
BottomAppBar: 底部应用栏
BottomDrawer: 底部抽屉
TopAppBar: 顶部应用栏
ModalBottomSheet：实现底部弹出框
BottomSheet: 底部弹出式窗口。
Menu: 弹出式菜单。
TabRow：实现选项卡，可用于导航
DropdownMenu：实现下拉菜单
PopupMenu：弹出菜单
Navigation：用于管理应用程序的导航，提供了一种可以让用户从一个屏幕到另一个屏幕的方式。

5.对话框控件

Dialog：用于显示对话框 的控件。
AlertDialog：实现弹出框
Compose Material Dialogs：提供了Material Design风格的对话框控件。

6.其他控件

Accompanist：提供了许多有用的Compose控件，例如各种加载占位符、图片缩放控件、滑动刷新控件等等。
Compose Charts：提供了各种绘图控件，包括折线图、柱状图、饼状图等等。
Compose Navigator：提供了一种新的导航方式，通过声明式路由和导航来管理不同屏幕之间的转换。
Compose DataTable：提供了数据表格控件，用于展示数据的表格。
Compose Countdown Timer：提供了倒计时控件。
Compose Timeline：提供了时间线控件。
Surface：实现 Material Design 风格的表面，具有形状和阴影
Spacer:用于占据空白区域，并支持自定义大小
AppBar: 应用栏。
Drawer: 抽屉式布局。用于显示侧边栏的控件。
SwipeRefreshLayout：可用于实现下拉刷新操作的控件。
WebView：用于在应用中加载网页的控件。
SwipeRefresh：用于创建下拉刷新的控件。

二 .基本用法

1. 图片显示

	Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),//通过painterResource函数指定资源图
            contentDescription = "头像",//指定描述文案
            modifier = Modifier //通过Modifier指定控件大小,裁切类型,描边类型
                .size(40.dp)
                .clip(CircleShape)
                .border(1.dp, Color.Blue, CircleShape)
        )