首页 > 其他分享 >打卡2

打卡2

时间:2024-03-01 13:37:00浏览次数:18  
标签:MaterialTheme text Material showModalBottomSheet 打卡 ModalBottomSheet Card

简单的使用一些Material组件

自己完全绘制界面是非常麻烦的,还好有现成的Material组件来使用,这里简单的使用一些Material组件。

1. Scaffold

Scaffold是Material组件库中提供的一个页面脚手架,它包含了Appbar、Drawer、BottomNavigationBar、FloatingActionButton等常用的组件,使用Scaffold可以很容易的构建出一个标准的Material风格页面。

比如在下面的例子中,我只是需要我的记账本App中的顶栏和底部的悬浮添加按钮,那么我只需要在Scaffold中设置appBar和floatingActionButton属性即可。

  Scaffold(
  topBar = {
  TopAppBar(
  colors = TopAppBarDefaults.topAppBarColors(
  containerColor = MaterialTheme.colorScheme.primaryContainer,
  titleContentColor = MaterialTheme.colorScheme.primary,
  ),
  title = {
  Text("Expense Tracker")
  }
  )
  },
  floatingActionButton = {
  ExtendedFloatingActionButton(
  onClick = { appUiState.showModalBottomSheet.value = true },
  icon = { Icon(Icons.Filled.Add, "Add New Expense Record") },
  text = { Text(text = "Add New") },
  )
  }
  ) {
  ...
  }

2.Card

Card是一个Material组件,它是一个卡片,可以用来包裹一些内容,在这个例子中,我需要在我的记账本App中展示一些账单记录,那么我就可以使用Card来包裹这些记录。

  @Composable
  fun ExpenseRecordContent(record: ExpenseRecord) {
  Card(
  modifier = Modifier
  .fillMaxWidth()
  .padding(10.dp)
  ) {
  Column(modifier = Modifier.padding(10.dp, 10.dp)) {
  Text(
  text = record.name,
  style = MaterialTheme.typography.titleSmall
  )
  Text(
  text = record.money.toString(),
  modifier = Modifier.fillMaxWidth(),
  textAlign = TextAlign.End,
  style = MaterialTheme.typography.displayMedium
  )
  Text(
  text = record.time.toString(),
  modifier = Modifier.fillMaxWidth(),
  textAlign = TextAlign.End,
  style = MaterialTheme.typography.labelSmall
  )
  }
  }
  }

这里定义了一个ExpenseRecordContent的Composable函数,它接受一个ExpenseRecord对象作为参数,然后使用Card包裹了这个记录的内容。Card里面的内容是一个Column,里面包含了这个记录的名称、金额和时间。

3. ModalBottomSheet

ModalBottomSheet是一个底部弹出的面板,可以用来展示一些额外的内容,比如在这个例子中,我需要在我的记账本App中添加一个新的账单记录,那么我就可以使用ModalBottomSheet来展示一个表单,让用户输入新的账单记录。

为了管理ModalBottomSheet的显示和隐藏,我使用了一个appUiState的状态对象,它包含了一个showModalBottomSheet的MutableState,当这个状态为true时,ModalBottomSheet就会显示出来。

  if (appUiState.showModalBottomSheet.value) {
  ModalBottomSheet(
  onDismissRequest = { appUiState.showModalBottomSheet.value = false },
  modifier = Modifier.navigationBarsPadding(),
  ) {
  ExpenseRecordInputSheet(appViewModel)
  }
  }

在这个例子中,我使用了ModalBottomSheet来展示一个表单,让用户输入新的账单记录。当用户点击了悬浮添加按钮时,我就会将showModalBottomSheet的状态设置为true,这样ModalBottomSheet就会显示出来。

标签:MaterialTheme,text,Material,showModalBottomSheet,打卡,ModalBottomSheet,Card
From: https://www.cnblogs.com/2022-yang/p/18046782

相关文章

  • 打卡4
    命名为ListAdapter这里采用的是BaseAdapterpackagecom.example.myaccountapp;importandroid.content.Context;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.Adapter;importandroid.widget.BaseAdapter......
  • 寒假打卡!
    HTML样式实例学习-背景颜色背景色属性(background-color)定义一个元素的背景颜色:实例<bodystyle=""><h2style="">这是一个标题</h2><pstyle="">这是一个段落。</p></body>早期背景色属性(background-color)是使用bgcolor属性定义。现在通常使用font-family(字体......
  • 寒假打卡@
    HTML表格学习:HTML表格由<table>标签来定义,HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义),表格可以包含标题行(<th>)用于定义列的标题。tr:tr是tablerow的缩写,表示表格的一行。td:td是table......
  • 20240228打卡
    早上python程序设计课,主要对py的安装配置以及基础的语法进行了学习,并通过实际例子体会其鲜明的特点然后工程数学课,主要学习了最优化模型,并顺带复习了以前线性代数的相关知识,老师让我们要会用matlab,但好贵,学生认证后还要29美元qwq。掏钱是不可能滴,先用python试试看吧下午虽然没课......
  • 大二下打卡(2.27)
    今天做了什么:上午,早上醒来,今天是英语四级考试出分的日子,先看了眼朋友圈跟QQ空间,很好,大家都查出来了,说明网站稳定,于是我立马打开浏览器查询我的分数,过了,得劲,多亏了高中三年的老底,下一次就是六月份的六级接着就是第一节计算机网络课,大二上学期的时候,建民老师就说,不知道什么原因,软......
  • 20240214打卡
    在Android中,可以通过定义drawable文件来创建自定义的图形、形状、背景等,然后在布局文件中应用这些drawable文件作为背景或者图标。同时,也可以通过定义样式(style)来设定布局以及控件的样式,从而实现一致的外观和风格。下面展示如何定义drawable文件以及样式,并将其应用到布局和控件中......
  • 20240215打卡
    使用MPAndroidChart第三方框架绘制柱状图:1.**在build.gradle文件中添加依赖项**(低版本可以导入jar包):打开您的项目的build.gradle文件,然后在dependencies部分添加MPAndroidChart的依赖项。```groovydependencies{implementation'com.github.PhilJay:MPAndroidCh......
  • 20240206打卡
    自定义软键盘通常涉及两个方面:设计自定义键盘布局和管理键盘的显示和隐藏。自定义绘制和使用软键盘:1.**设计自定义键盘布局**:创建一个自定义的XML布局文件,定义您想要的键盘布局。您可以使用`Button`或其他视图来表示键。例如,创建一个名为`custom_keyboard.xml`的布局文件。......
  • 20240213打卡
    在Android中,可以使用SQLite数据库来创建和管理本地数据库。下面使用Android自带的数据库API创建表,并进行增删改查操作:1.**创建数据库帮助类**:首先,创建一个继承自`SQLiteOpenHelper`的类,用于管理数据库的创建和版本控制。```java//DbHelper.javaimportandroid.content.Con......
  • 20240205打卡
    在AndroidStudio中使用碎片(Fragments)加载界面,并实现滑动视图切换页面:1.**创建项目**:在AndroidStudio中创建一个新项目。2.**添加碎片**:在`res/layout`目录下创建您的碎片布局文件。您可以使用XML定义碎片的布局。例如,创建一个`fragment_one.xml`和`fragment_two.xml`......