脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android Compose底部按钮

Android Compose实现底部按钮以及首页内容详细过程第2/2页

 更新时间：2021年11月18日 15:30:43   作者：theyangchoi  
这篇文章主要介绍了如何利用compose框架制作app底部按钮以及首页内容的详细代码，具有一定价值，感兴趣的可以了解一下
.imagePath), modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop, contentDescription = null ) } //自动轮播 LaunchedEffect(key1 = pagerState.currentPage, block = { Log.e("LaunchedEffect","${pagerState.currentPage}") if (pagerState.currentPage >=0 && pagerState.currentPage < bannerList.size -1){ delay(timeMillis = timeMillis) pagerState.animateScrollToPage(pagerState.currentPage +1) }else{ delay(timeMillis = timeMillis) pagerState.animateScrollToPage(0) } }) } }

最后就行调用

InitBanner(bannerList= bannerList!!,2000L)

实现文章列表

数据请求就不做过多赘述了，和banner的数据请求一样，这里主要解析一下Compose的约束布局ConstraintLayout。

Compose约束布局需要导入以下相关依赖：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01"
  1. val img = createRef() 创建一个依赖点，就像xml约束布局里面的id意义昂
  2. Modifier 使用Modifier的constrainAs进行约束调整
ConstraintLayout(
        Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp)) {
             val img = createRef()
             Text(text = "作者:${entity.audit}")

             Image(painter = painterResource(id = R.drawable.icon_un_select),
                   contentDescription = "收藏",
                   Modifier
                       .width(30.dp)
                       .height(30.dp)
                       .constrainAs(img) {
                           end.linkTo(parent.end)
                        },
            		alignment = Alignment.CenterEnd)
}

Item代码如下

@Composable
private fun ArticleListItem(entity: ArticleEntity,modifier: Modifier = Modifier){
    Card(
        shape = RoundedCornerShape(10.dp),
        backgroundColor = ComposeUIDemoTheme.colors.listItem,
        elevation = 2.dp,modifier =
        Modifier.padding(0.dp,10.dp,0.dp,0.dp)
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .clickable {
                    Log.e("articleTAG", "文章点击")
                }) {
            Column(Modifier.fillMaxWidth()) {
                Text(text = "${entity.title}",
                    Modifier.padding(8.dp,8.dp,8.dp,8.dp),
                    fontSize = 16.sp,
                    color = ComposeUIDemoTheme.colors.textPrimary,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis)

                ConstraintLayout(
                    Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 8.dp)) {
                    val img = createRef()
                    Text(text = "作者:${entity.audit}")

                    Image(painter = painterResource(id = R.drawable.icon_un_select),
                        contentDescription = "收藏",
                        Modifier
                            .width(30.dp)
                            .height(30.dp)
                            .constrainAs(img) {
                                end.linkTo(parent.end)
                            },
                        alignment = Alignment.CenterEnd)
                }

                ConstraintLayout(
                    Modifier
                        .fillMaxWidth()
                        .padding(8.dp)) {
                    val parentView = createRef()

                    Text(text = "${entity.superChapterName}",
                        modifier = Modifier
                            .padding(8.dp)
                            .border(
                                1.dp, color = Color(R.color.b_666),
                                RoundedCornerShape(8.dp)
                            )
                            .padding(horizontal = 8.dp, vertical = 2.dp),
                        color = Color.Gray,
                        fontSize = 12.sp
                    )
                    Text(text = "${entity.niceShareDate}",modifier = Modifier.constrainAs(parentView){
                        end.linkTo(parent.end)
                        centerVerticallyTo(parent)
                    },color = Color.Gray,fontSize = 12.sp,textAlign = TextAlign.Center)
                }
            }
        }
    }
}

SwipeRefresh下拉刷新

操作列表的时候下拉刷新和上拉加载更多的操作肯定是少不了的，这里先说一下Compose SwipeRefresh下拉刷新组件的使用。

首先导入依赖包：

implementation "com.google.accompanist:accompanist-swiperefresh:$accompanist_pager"//0.20.2

在ViewModel里面保存一个记录刷新状态的元素，在刷新请求数据过程中这个值要变成true进行刷新动画的加载，刷新完成之后要变成false关闭加载动画。

val _isRefreshing: MutableLiveData<Boolean> = MutableLiveData(false)
val isRefreshing by viewModel._isRefreshing.observeAsState(false)
SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing = isRefreshing),
    onRefresh = {
          //将刷新状态的值改为true  显示加载动画
          viewModel._isRefreshing.value = true
          //将请求数据的值做改变  让它能重新请求数据
          requestState.value = "refresh"+System.currentTimeMillis()
    }) {
    	//填充数据
        Box(
           Modifier
                .background(ComposeUIDemoTheme.colors.background)
                .fillMaxSize()
          ) {
              Column(Modifier.fillMaxWidth()) {
                    if (bannerList !== null){
                        InitBanner(bannerList= bannerList!!,2000L)
                    }
                    if (articleEntityPage !== null){
                        InitHomeArticleList(articleData = articleEntityPage!!)
                    }
            }
     }
}

LaunchedEffect(key1 = requestState.value, block = {
    bVM.getBannerList()
    bVM.getArticleData({
        viewModel._isRefreshing.value = false//将刷新状态的值改成false 关闭加载状态
    })
})

首页的内容一共就这么多了，到这里就能实现一个 app的地步导航栏以及首页了。

LaunchedEffect简介

LaunchedEffect存在的意义是允许我们在被Composable标注的方法中使用协程。

@Composable
@NonRestartableComposable
@OptIn(InternalComposeApi::class)
fun LaunchedEffect(
    key1: Any?,
    block: suspend CoroutineScope.() -> Unit
) {
    val applyContext = currentComposer.applyCoroutineContext
    remember(key1) { LaunchedEffectImpl(applyContext, block) }
}

主要参数是key1，block；key1是触发条件，当key1发生改变的时候就会执行block里面的方法，注意是发生改变的时候。

我们一开始在请求数据的时候创建了一个requestState来记录请求状态，如果这个状态不发生改变，那么就只会触发一次LaunchedEffect对数据进行请求。

//记录请求状态
val requestState = remember { mutableStateOf("") }
LaunchedEffect(key1 = requestState.value, block = {
   bVM.getBannerList()
   bVM.getArticleData({
        viewModel._isRefreshing.value = false//将刷新状态的值改成false 关闭加载状态
   })
})

而当我们在刷新的时候在onRefres里面改变了这个参数的值，那么它就会触发LaunchedEffect重新进行数据请求。

onRefresh = {
      //将刷新状态的值改为true  显示加载动画
      viewModel._isRefreshing.value = true
      //将请求数据的值做改变  让它能重新请求数据
      requestState.value = "refresh"+System.currentTimeMillis()
}

HorizontalPager简介

HorizontalPager类似于AndroidView的ViewPager，用于页面承载和滑动切换，主要参数是count页面数据，以及state 当前页面状态。

// Display 10 items
HorizontalPager(count = 10) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}

通过scrollToPage可以进行页面切换，但是只能在协程里面被执行，所以同样要使用LaunchedEffect进行页面切换。

//页面切换
LaunchedEffect(key1 = indexState.value, block = {
     pagerState.scrollToPage(indexState.value)
})

更多用法以及demo移步这个链接。

源码地址

码云地址，记得切换main分支

到此这篇关于Android Compose实现底部按钮以及首页内容详细过程的文章就介绍到这了,更多相关Android内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一页12阅读全文
您可能感兴趣的文章:

相关文章

最新评论