首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

flutter 起步

flutter简介Flutter是谷歌的移动UI框架,可以运行在ios与android系统上,可以以完成app的开发,使用情况页面大多数涉及到flutter 开发的app 都是混合开发,占比并不多。...在代码引用第三方库并使用针对english_words这个第三方库来讲,具体使用参见如下代码import 'package:flutter/material.dart';import 'package...MaterialApp:什么是MaterialAppMaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。...CloseButton:关闭按钮的组件BackButton:返回按钮的组件Chip:材料设计中非常有趣的一个组件Divider:分割线的组件Card:卡片状的容器组件AlertDialog:一个弹框的组件...Scaffold :Scaffold 实现了基本的 Material Design 布局结构。在 Material 设计定义的单个界面上的各种布局元素,在 Scaffold 中都支持。

4.4K20

欢迎体验 | Wear OS 版 Compose 开发者预览版

就像在移动设备上一样,欢迎您立即着手测试,我们也希望在发布 Beta 版前,将您的 反馈 纳入库的早期迭代。 本文将回顾我们构建的几个主要可组合项,并介绍帮助您开始使用的多种资源。 现在就开始吧!...这就意味着面向 Wear OS 设计时,您搭配 Jetpack Compose 使用的许多依赖项不会发生变化。例如,UI运行时间、编译器和动画依赖项都将保持不变。...开发者可以继续使用其他与 Material 相关的开发库, Material 涟漪和通过 Wear Compose Material 开发库进行扩展的 Material 图标。...以下是开发库中一些可组合项的示例: 按钮 卡片 图标 文本 除此之外,我们还引入了许多可提升 Wear 体验的全新可组合项: Chip ToggleChip BasicCurvedText TimeText...此版本添加了对开箱即用的滑动关闭手势的支持 (类似于移动设备的返回按钮/手势)。

1.6K10

听说谷歌Baba更新了 Material UI ...

本文预计阅读:10分钟 听说谷歌Baba的IO大会更新了一些新奇的小玩意~ 新东西忒多,这里先重点关注下有关:Material UI。 最近的状态啊,真是千万头草泥马奔腾而过。。。...:espresso-core:3.0.2'    // 4.添加material依赖    implementation 'com.google.android.material:material:...1.0.0-alpha1' } 当然,你可以使用 com.android.support:design:28.0.0-alpha1 但是主要注意的是design包和material二者只能选一。...那下面按照步骤操作一次: Step 1:在布局添加BottomNavigationView: <com.google.android.material.bottomnavigation.BottomNavigationView...下面着撸起实现: Step 1:搞个布局玩玩 外层使用CoordinatorLayout包裹,底部导航栏采用BottomNavigationView,中间内容区域,很Easy咯~ <?

3K20

2018年最优秀的9个Android Material Design Apps!

也带来了Material Design 的一些改变 – Material Theming (材料主题),旨在自定义Material Design应用程序,以更好地反映产品品牌。...下载:360,000+ 产品特色: 跨平台统一UI设计 精简的材料设计风格图标,按钮和布局 图像化构建 谷歌的宗旨之一是”Fast is better than slow”....下载:4,616,329 产品特色: Material Theming 智能选择常用回复 精致材料设计风格图标 新增侧边栏 Gmail作为日常生活的常用邮箱工具,大家并不陌生。...清晰的布局和清晰易读的类型使应用程序易于细读。 在Blinkist,通过图像,动作,尤其是引人入胜的排版突出品牌标识。类型布局建立了清晰的层次结构,同时通过舒适地使用空白来保持读者友好的演示。...“使用Material Design,我们能够有效地组织公共广播的内容,并以鼓励偶然倾听的方式呈现内容,同时向公众通报当地和国家问题。这是一种可访问的体验,确保每个人都可以使用公共广播“。

1.8K40

【软件开发规范七】《Android UI设计规范》

Material Design相关 2.1 核心思想 2.2 材质与空间 2.3 动画 2.4 颜色 2.5 图标 2.6 图片 2.7 文字 字体 文字排版 2.8 布局 2.9 组件(Components...编辑 Material Design 是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一致。...2.2 材质与空间 材质 ​编辑 Material Design ,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。...,表面不要有图案 不能透视、弯曲 ** 小图标 ** 优先使用material design默认图标。...通过按压动作可以触发悬浮卡片(或者是全屏视图)Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。 狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。 ​

4.9K20

Flutte部件目录-Material Components 顶

实现Material Design指南的视觉,行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录的更多小部件。...通常与TabBar结合使用。 ? MaterialApp 一个方便的小部件,它包装了许多实现Material Design的应用程序通常需要的小部件。 ? ? ?...Drawer Material Design面板,从展示台的边缘水平滑动,以在应用程序显示导航链接。 ? 按钮 RaisedButton 材质设计凸起按钮。...例如,他们可以显示头像图标,以阐明潜台词或正交行为(添加帐户)。 ? AlertDialog 警报是需要确认的紧急中断,通知用户有关情况。 AlertDialog小部件实现了这个组件。 ?...Icon 材质设计图标。 ? Chip 一个Material Design芯片。 芯片代表小块的复杂实体,联系人。 ?

9.4K40

分享一个非常不错的页面组件库

随着现在前端的发展,一些成套的组件库也是层出不穷了,比如基于 Vue 的 Element UI、iView,基于 React 的 Ant Design、Fluent UI 等等,它们设计其实挺好的,但有一些色彩搭配和风格还没有达到我理想的样子.../ 同时我也对 Material Design 的一些光影理念比较推崇,但并不太喜欢原生的 Material Design,比如这样的: 我个人觉得这种原生的 Material Design 有点用力过猛...相比之下,目前的一些 Element UI、Ant Design 则算是吸收了二者的一些优点,提供了一些 UI 组件,比如这样的: 这种设计风格显得没有 Material Design 那样厚重,也吸取了一些...,一些布局、卡片和文本框的轮廓也显得很明晰,另外一些配色、图标的样式整体也给人一种清爽的感觉,总之我个人非常喜欢。...STISLA 现在是完全开源的,其 GitHub 仓库是:https://github.com/stisla/stisla,使用的话直接引用其中的 CSS 即可,这里就不再赘述了。

91330

不懂设计的产品不是好开发

在演示应用程序,我们有一个饼状图,其中我们需要在每个部分使用不同的颜色。另一个例子是用颜色作为不同状态的视觉指标,警报级别、金额变化或性能变化(减少/增加)。...在演示的应用程序,我几乎把所有的UI组件都应用了形状,以达到演示的目的,这绝对是不推荐的。 截至目前,Material Design有两种形状样式:圆角和切角。...Material图标也可以在Web和Flutter项目中作为图标字体使用图标字体是用字体的字形绘制的,但不是字母,而是图标和形状。...Flutter通过从字体集中移除未使用的符号来优化Material design图标库,这就减少了应用程序的大小、加载时间和内存使用。...考虑到品牌形状,ATA将使用圆形图标,Biohack将使用尖锐图标,Codeland将使用填充图标。 Conclusion 在这篇文章,我解释了主题属性和相应的Material设计指南。

2.5K20

【Jetpack】DataBinding 架构组件 ( 数据绑定技术简介 | Android 的 DataBinding 数据绑定 | 启动数据绑定 | 定义数据类 | 布局文件转换 )

UI 界面 与 数据模型 , 在各个平台都有该技术的应用 , Android , Angular , React 等框架中都使用了 数据绑定技术 ; 数据绑定 DataBinding 将 数据模型...布局文件UI 组件 与 数据模型 Model 进行绑定 ; 当 用户 通过 UI 组件 修改数据时 , 会将数据自动更新到 数据模型 ; 数据模型 的数据 改变时 , 会自动更新到 UI...组件 ; 使用 DataBinding 可以在 Android 的布局文件 , 承担部分 Activity 组件的工作 , 减少传统方式用法的 耦合度 ; : 想要将 数据设置到 TextView...: 减少了 冗余代码 , findViewById 这一类的代码 ; 降低了 Activity 组件页面 与 Layout 布局 的 耦合度 , 数据可以直接设置到布局组件 , 不需要在 Activity... , 为组件设置 tools:text 属性 , 该属性只能在 Design 视图中查看 , 方便开发调试 , 不会显示在最终的应用 ; 在布局文件 , 使用 @{student.变量名} 获取该数据类型对象的成员

1.2K20
领券