首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flutter组件3【ListTile 的使用】

ListTile 通常用于 Flutter 填充 ListView 属性如下: title: title 参数可以接受任何小部件,但通常是文本小部件 subtitle: 副标题是标题下面较小的文本...dense: 使文本更小,并将所有内容打包在一起 leading: 将图像或图标添加到列表的开头。...这通常是一个图标。 trailing: 设置将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。...contentPadding: 设置内容边距,默认是 16,但我们在这里设置为 0 selected: 如果选中列表的 item 项,那么文本和图标的颜色将成为主题的主颜色。...Gesture recognition: ListTile 可以检测用户的点击和长按事件,onTap 为单击,onLongPress 为长按。

2K20

Flutter构建布局 顶

这是Flutter构建布局的指南。 您将构建以下屏幕截图的布局: ? 然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。...讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。...在这个例子,每个文本小部件放置容器以添加边距。 整个行也被放置容器以在行的周围添加填充。 本例的其余UI由属性控制。 使用其color属性设置图标的颜色。...Flutter,只需几个步骤即可在屏幕上放置文本,图标或图像。 1.选择一个布局小部件来保存该对象。...设计用户界面时,您可以专门使用标准小部件库的小部件,也可以使用材质部件的小部件。 您可以混合使用两个的小部件,您可以自定义现有的小部件,也可以构建自己的一组定制小部件。

43.1K10
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript代码规范

团队约定使用驼峰式命名 逗号 ECMAScript5 里面,对象字面量逗号是合法的,但在 IE8(非 IE8 文档模式)下,当出现逗号,则会抛出错误。...因为逗号有好也有不好,所以团队约定允许最后一个元素或属性与闭括号 ] 或 } 不同行时,可以(但不要求)使用逗号。当在同一行时,禁止使用逗号。...JavaScript 主要有两种逗号风格: 标准风格,逗号放置在当前行的末尾 逗号前置风格,逗号放置在下一行的开始位置 团队约定使用标准风格 不推荐 var foo = 1 , bar = 2 var...非空文件,存在换行是一个常见的 UNIX 风格,它的好处是可以方便在串联和追加文件时不会打断 Shell 的提示。...日常的项目中,保留换行的好处是,可以减少版本控制时的代码冲突。

2.6K30

【Flutter 专题】12 ListView 用哪种方式绑定数据?

和尚觉得 **Flutter ** ListView 这个控件很强大,它兼顾了 Android 的 ScrollView 和 ListView 两个控件的效果,既可以当列表用也可以充当可滑动布局。...列表 item -> ListTile Flutter 很贴心的提供了一种常见的列表 item 样式,可以包括前后图标以及大小标题的样式;和尚特意了解了一下 ListTile 的基本属性,如下: const...ListTile({ Key key, this.leading, // item 前置图标 this.title, /...ListView 用法与 Android 类似,首先添加数据,之后绑定列表;Flutter 绑定列表有四种方式,分别是 默认 List / ListView.builder / ListView.separated...ListView.custom 和尚暂时不对本加载方式做实例尝试,和尚理解 ListView.custom 更适合对 item 中含有子类 item,并对子类 item 的显隐性有更多操作时使用该方式更好;以后的尝试中和尚会单独对这种方式进行测试整理

1.6K81

Flutter 布局常用的 widgets(Common layout widgets)

GridView 将多个widget放在一个可滑动的表格。 ListView 将多个widget放在一个可滑动的列表。 Stack 一个widget上面盖上另一个widget。...ListTile 一个Row中装载最多3行文字;可选则在前面或尾部添加图标。 Container Container用法比较自由。...ListView 小结 把子视图装进列表 水平或竖直都可以 支持滑动 相比于Column,可选配置比较少,但更易用并且支持滑动 和Android的ListView差别不大 示例1 把ListTile...ListTile 来自Material组件库的横向组件。可自定义3行文字及其可选的头尾图标。 此控件常与Card或ListView一起用。...ListTile 小结: 可定制3行带图标的文字 相比于Row,配置更少,但更易用 加一个主界面 放置一些按钮,点击跳转到相应的界面。

1.3K30

HarmonyOS应用开发-低代码开发登录页

放置图标图片 如图,我们需要放置一个水平居中的应用图标: 思路:下面我们来实现登录页面的图标,我们需要创建一个行容器(Row),然后一个图片组件(Imgae)进去,并使图片居中。...操作:两个文本组件(Text)到行容器(Row)下面。...操作流程: 首先,我们处理账号和密码输入两个文本输入框。 两个文本输入组件(TextInput)我们之前的组件下面。...效果图如下: 下一步,我们来制作两个输入框下面的 “短信验证码登录” 和 “忘记密码”。 一个行容器(Row)到文本输入框组件下面,设置行容器(Row)的属性。...)里一个GuidItem组件,这是一个动态显示的子元素组件,会根据我们提供的参数动态进行内容显示,由于我们设计上固定为行内显示3个,所以宽度就直接定为33.3%了。

29810

ExpansionPanelList

前言 ---- 在前面的文章我们介绍了可以展开的带标题控件ExpansionTile的用法,文章的最后还是按照惯例给大家留下了一个问题。 实现如下效果: ?...可以看到界面整体上是一个listView,ListView的第二例是一个ExpansionTile,ExpansionTile的内部是多个ListTile,trailing结合自定义动画将“+”icon...仅仅放置了一个元素ExpansionPanel,对ExpansionPanel分别设置了它的标题和内容。...但是这个时候无论我们怎么点击右侧的图标都没有任何的反应,那是因为这个ExpansionPanel我们默认设置的是关闭的状态,而且我们也并没有对ExpansionPanelList的点击事件做处理。...下面简单改动下代码,ExpansionPanelListDemoState增加如下代码: var isExpanded; _expansionCallback(index ,isExpanded)

3.9K40

【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

组件类似 , Wrap 组件可以换行 ; Flow : 不常用 ; ParentDataWidget : Positioned : 用于固定组件位置的组件 ; Flexible : 用于约束组件父容器展开大小的组件...Stack 组件内部 , 可以使用 Positioned 组件指定某个子组件 Stack 布局组件的位置 ; 代码示例 : // 帧布局 Stack( children: [...child: Image.file(file, width: 120, height: 90, fit: BoxFit.fill,), ), // 使用 Positioned 组件帧布局定位子组件..., ] ) 效果展示 : 整体是 Stack 帧布局 , 使用 ClipRRect 组件将 Image 组件切割成了圆角矩形 , Stack 组件内使用 Positioned 组件将关闭按钮 , 放置了右上角...Center 组件放置一个 Icon 白色图标 , 就组成了圆形的关闭按钮 ; 关闭按钮代码示例 : // 手势检测器组件 GestureDetector( // 点击事件 onTap: ()

8.4K20

【Flutter 专题】23 图解PopupMenu 那些事儿~

item 可以自定义需要的样式,包括文字图片等一系列样式。...Tips: 若需要处理带图标的样式时,官网提供的 Demo 是借助的 ListTile 来处理的,但是和尚测试发现图标与文字距离偏大,原因在于 ListTile 默认左侧图标 leading 距离不可直接调整...// ListTile 样式 new PopupMenuItem( value: 'value01', child: ListTile( leading: Icon(Icons.looks_one...默认高度同样是 48px,水平布局使用 ListTile 复选标记是 Icons.done 图标,显示 leading 位置;同时只有状态为选中时才会显示图标。...showMenu 指定位置 PopupMenu 默认的弹框位置都是右上角,且会挡住标题栏,如果有需要在其他位置弹框就需要借助 showMenu,主要通过 position 属性定位弹框位置。

1.7K41

Flutter 可折叠边栏

本博客,我们将探讨Flutter 的**可折叠侧边栏。...它是一个向左滑动的菜单,大多数情况下,它包含应用程序的重要连接,并且显示时拥有一半的屏幕。 该演示视频展示了如何在Flutter创建可折叠的侧边栏。...在此小部件,我们将添加中心小部件。在内部,我们将添加一个列小部件。列小部件,我们将添加两个文本,并且mainAxisAlignment为中心。...我们将添加一个菜单图标和onPressed()方法。在此方法,我们将定义setState()。当_fsbStatus等于FSBStatus.FSB_OPEN时,抽屉将关闭。否则,它们将打开。...在此小部件,我们将添加一个列小部件。在内部,我们将添加图像,文本和ListTile。我们将添加三个带有图标和文本的ListTile

6.3K50

Flutter Drawer 抽屉视图与自定义header

移动开发,drawerLayout抽屉视图是比较常用的一种控件。一般将用户的头像,用户名等信息抽屉视图中呈现。 drawer也可以提供一些选项,比如跳转去设置页,跳转去用户资料页面等等。...使用material的UserAccountsDrawerHeader 使用material的UserAccountsDrawerHeader,设置accountName和currentAccountPicture...DrawerHeader设置padding为0,充满整个顶部 DrawerHeader的child使用Stack,目的是放置背景图片 Stack偏左下的位置放置头像和用户名 先用Align确定对齐方式为...FractionalOffset.bottomLeft Align的child为Container,并设定一个具体高度 头像与文字的Container仿照ListTile的风格,左边是一个头像,右边是文字...自定义header的过程,我们组合使用了多种widget; 有层叠的Stack,用于对齐的Align,设定具体尺寸和margin的Container,水平放置的Row以及竖直放置的Column。

1.6K20

Flutte部件目录-Material Components 顶

应用程序结构和导航 Scaffold Appbar 上面两个基本部件已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间顶层视图之间切换。...一个显示应用底部的材质小部件,用于少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者的多个项目组成,并放置一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...final items → List 放置底部的导航栏内的互动条目....FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容上以提升应用程序的主要操作。...布局 ListTile 单个固定高度的行,通常包含一些文本以及前导或尾随图标。 ? Stepper 材质设计步骤部件,通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线,两边都有填充。

9.4K40

【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

FloatingActionButton( // 浮动按钮点击事件 onPressed: () { } ) VoidCallback 就是参数和返回值都是空的函数 ; onPressed: () {} 括号的参数为空...Function(); 二、底部显示按钮组件 ---- 调用 showModalBottomSheet 方法 , 即可弹出底部按钮组件 , 该组件由开发者定义 , 可以是任何组件 , 如 Column ; 这里底部显示的是一个...Container 组件 , Container 组件内部包含了一个 Column 组件 ; /// 浮动按钮点击事件 /// 点击浮动按钮 , 弹出一个菜单 /// 菜单有两个按钮 , 分别是 拍照...( // 相机图标 leading: Icon(Icons.camera_alt), title: Text("拍照"), /// 按钮点击事件 onTap: (...pickedFile.path); } else { print('No image selected.'); } }); } /// 获取相册的图像

1.5K30

UITableViewFlutter是什么?

这样的需求,iOS是用UITableView实现的;而在Flutter,实现这种需求的则是列表控件ListView。...如下所示,我定义了一组列表项组件,并将他们放在了垂直滚动的ListView: ListView( children: [ //设置ListView组件的标题与图标...], ); 备注:ListTile是Flutter提供的用于快速构建列表项元素的一个小组件单元,用于1~3行(leading、title、subtitle)展示文本、图标等视图元素的场景,通常与...我定义了一个拥有100个列表元素的ListView,列表项的创建方法,分别将index的值设置为ListTile的标题与子标题。...ListView,有两种方式支持分割线: 一种是,itemBuilder,根据index的值动态创建分割线,也就是将分割线视为列表项的一部分; 另一种是,使用ListView的另一个构造方法,

5.5K10

正确的用户拖拽方式

先来看看两个案例对比: 上图是一个反例,下图是一个正例。 第二个案例感觉更顺畅真实,主要是因为反馈效果更多。 接下来,我把拖拽过程的设计要点展开说一说。 1....下图是优化后正确的效果: 通过图标和指针,也能暗示拖动的方向,减少学习成本。 2. 拖拽状态 拖拽过程,主要有两方面问题需要解决:拖拽对象不突出和拖拽对象遮挡背景,以下反例中都能体现。...这时建议拖拽开始后,高亮出目标位置的范围,这样就少了很多试错成本。 例如下图,开始拖拽后,水果和蔬菜卡片立即加上阴影,暗示了可以往哪里。 4....下图就是一个常见的反例: 最好是拖动过程中原位置保留,并且接近新位置时,把放置空间预留出来。 5. 吸附确认 下面的反例,拖拽对象卡在两个目标位置之间,如果此时松手,不确定会吸附到哪里。...选中状态 不知道大家有没有过这样的经历,把一个东西拖拽到另一个地方,完后就忘记刚刚的是什么了。 尤其是在这过程页面还跳动一下,就完全找不着北了。

90110

Mac下键盘使用

例如,要使用快捷键 Command-C(拷贝),请按住 Command 键并按 C 键,然后同时松开这两个键。...有些 Mac 键盘在顶行设有特殊按键,快捷键也会用到它们;这些按键上有音量图标、显示屏亮度图标和其他功能图标。...某些应用,您可以撤销和重做多个命令。 Command-A 全选各项。 Command-F 查找文稿的项目或打开“查找”窗口。...Option–Shift–下箭头 将文本选择范围扩展到当前段落的段,再按一次则扩展到下一段落的段。...移时按 Command 键 将移的项目移到其他宗卷或位置。移项目时指针会随之变化。 移时按住 Option 键 拷贝移的项目。移项目时指针会随之变化。

2.7K130

MacOSDock栏的设置和使用

Dock栏就是Mac放置常用应用程序和文件夹快捷方式的任务栏,为你访问这个应用和文件提供了非常方便的入口。 作为Mac用户最常使用的区域,要知道如何才能更高效的使用它,从而达到事半功倍的效果。...点按应用程序图标,将其拖到Dock栏即可添加(文件夹可以添加到分割线右侧) 3. 点按拖动应用程序图标,可以移动位置 4....若应用程序正在使用,可直接在Dock栏右键该应用图标选项列表中选择程序坞中保留 移除应用程序、文件(夹) 1. 移除应用程序时,先退出应用程序 2....点按住Dock栏上的应用程序图标,将其离Dock,当出现移除提示时松开 添加空白分割区 1. 打开终端(Terminal.app) 2....空白区域就是个透明图标,可以移动位置或离Dock栏,重复上方指令可添加多个 添加最近使用 1. 打开终端(Terminal.app) 2.

3.3K40
领券