JetpackCompose Scaffold组件使用教程

目录
  • 搭设基本Scaffold页面
  • 准备工作
  • 主体编写

搭设基本Scaffold页面

scaffold 组件遵循 Material Design,可以协助开发者迅速构建对应框架页面

准备工作

首先在 drawable 文件夹内,添加几张 vector images,用作我们的底部导航栏图标

在主页面中声明数据类,表示单个图标以及其解释文本

data class Item(
    val name: String,
    val icon: Int
)

新增组件 mainBody,逐一添加三个底部按钮的图标

@Composable
fun mainBody() {
    // 存储当前选中的底部按钮的状态
    var selectedItem by remember {
        mutableStateOf(0)
    }
    // 三个底部按钮
    val items = listOf(
        Item("主页", R.drawable.home),
        Item("列表", R.drawable.list),
        Item("设置", R.drawable.setting)
    )
    ...
}

主体编写

首先是设置 topBar,即顶部导航栏对应按钮

代码很简单,但要注意使用的括号类型以及对应嵌套关系!

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("主页") },
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Menu, null)
                }
            }
        )
    },
    ...
){}

紧接着在 topBar 属性后面写底部导航栏属性 bottomBar

items.forEachIndexed 按照索引渲染,vue 的 v-for 懂吧,就这个原理!

依次渲染 BottomNavigationItem 即可;

bottomBar = {
    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                // selectedItem 是内置属性,表示当前选中的Item
                // onClick即切换当前激活的Item
                selected = selectedItem == index,
                onClick = { selectedItem = index },
                // 这几个属性看看英文就懂了,不解释
                icon = { Icon(painterResource(item.icon), null) },
                alwaysShowLabel = false,
                label = { Text(item.name) }
            )
        }
    }
}

这是总体的代码:

@Composable
fun mainBody() {
    var selectedItem by remember {
        mutableStateOf(0)
    }
    val items = listOf(
        Item("主页", R.drawable.home),
        Item("列表", R.drawable.list),
        Item("设置", R.drawable.setting)
    )
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("主页") },
                navigationIcon = {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(Icons.Filled.Menu, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        selected = selectedItem == index,
                        onClick = { selectedItem = index },
                        icon = { Icon(painterResource(item.icon), null) },
                        alwaysShowLabel = false,
                        label = { Text(item.name) }
                    )
                }
            }
        }
    ) {
        // 在scaffold里面塞一个box,糊弄一下
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "主页界面")
        }
    }
}

到此这篇关于JetpackCompose Scaffold组件使用教程的文章就介绍到这了,更多相关JetpackCompose Scaffold内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JetpackCompose Navigation导航实现流程

    目录 Navigation 快速上手 编写欲跳转的两个页面 路由表配置 总路由 主页面调用总路由 跳转逻辑完善 Navigation 快速上手 下面案例简要展示使用 Compose 版本的 Navigation 库来实现两个页面之间的跳转 这是完整的结构(忽略掉红线划过的那个包) 编写欲跳转的两个页面 编写 Demo1 页面 子页面使用多个 composable 组件相组合的方法一一装配起来 Demo1main 渲染整个页面,他接受一个 NavController 对象,用于操纵导航相关的方法

  • Android JetpackCompose使用教程讲解

    目录 概况 开启新工程 文件结构 根结构 拆分方法 官方四节课教程细节剖析 data class 组件代码翻译 单例类 适配器的替代品 简单小动画 概况 compose 摒弃了原生开发模式中的 xml,代码结构类似于 flutter compose 仅支持 kotlin,虽然这玩意语法糖多但是也不难学 compose 可以通过极短的代码行数构建完善页面 开启新工程 首先请去 android 官网下载 android studio: 官网下载速度是正常的,别担心: 之后根据提示安装 android

  • Python调用C# Com dll组件实战教程

    之前公司有套C# AES加解密方案,但是方案加密用的是Rijndael类,而非AES的四种模式(ECB.CBC.CFB.OFB,这四种用的是RijndaelManaged类),Python下Crypto库AES也只有这四种模式,进而Python下无法实现C# AES Rijndael类加密效果了. 类似于这种C# 能实现的功能而在Python下实现不了的,搜集资料有两种解决方案,第一种方式,使用IronPython 直接调用C# dll文件,教程网上很多,不在赘述了,这种方式有个缺点,用的是ir

  • vue3.0 CLI - 2.1 - component 组件入门教程

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解. 3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等.  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义. view - 视图文件夹. 5个文件  app.vue.main.js - 主视图.配合 main.js 成为 vue 程序的主入口.router.

  • atom-design(Vue.js移动端组件库)手势组件使用教程

    介绍 atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由.更简单的去使用.这篇文章主要讲使用Gesture(手势)相关组件的感受. Gesture(手势)相关组件 •Carousel(传送带) •SlideItem (滑动条) •Range (区域选择) •Pull Gesture (上下拉动手势) Carousel(传送带) import {Carousel}

  • 使用Vue开发动态刷新Echarts组件的教程详解

    需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作 项目结构搭建 因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • C/C++ Qt 数据库QSql增删改查组件应用教程

    Qt SQL模块是Qt中用来操作数据库的类,该类封装了各种SQL数据库接口,可以很方便的链接并使用,数据的获取也使用了典型的Model/View结构,通过MV结构映射我们可以实现数据与通用组件的灵活绑定,一般SQL组件常用的操作,包括,读取数据,插入数据,更新数据,删除数据,这四个功能我将分别介绍它是如何使用的. SQL模块在使用时必须引入模块,需要在pro文件内增加QT += sql并在头文件内增加#include <QSqlDatabase>导入模块才可以正常使用. 初始化数据库: 初始化

  • C/C++ Qt数据库与SqlTableModel组件应用教程

    SqlTableModel 组件可以将数据库中的特定字段动态显示在TableView表格组件中,通常设置QSqlTableModel类的变量作为数据模型后就可以显示数据表内容,界面组件中则通过QDataWidgetMapper类实例设置为与某个数据库字段相关联,则可以实现自动显示字段的内容,不仅是显示,其还支持动态增删改查等各种复杂操作,期间不需要使用任何SQL语句. 首先绘制好UI界面,本次案例界面稍显复杂,左侧是一个TableView组件,其他地方均为LineEdit组件与Button组件.

  • Redis+Caffeine实现分布式二级缓存组件实战教程

    目录 前言 所谓二级缓存 分布式二级缓存的优势 如何使用组件? 核心实现方法 关于分布式本地缓存失效 前言 在生产中已有实践,本组件仅做个人学习交流分享使用.github:https://github.com/axinSoochow/redis-caffeine-cache-starter个人水平有限,欢迎大家在评论区轻喷. 所谓二级缓存 缓存就是将数据从读取较慢的介质上读取出来放到读取较快的介质上,如磁盘-->内存. 平时我们会将数据存储到磁盘上,如:数据库.如果每次都从数据库里去读取,会因为

  • 值得分享和收藏的xmlplus组件学习教程

    xmlplus 介绍 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目. 基于组件设计 在 xmlplus 中,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度.基于 xmlplus 设计的组件具有极高的封装度.下面是一个简单的组件示例: Widget: { css: "#widget{ color: red; }", xml: `<h1 id='widget'>default</h1>`, fun: functi

  • vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

随机推荐

其他