那么这里提下可滑动的容器部件 SingleChildScrollView 这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。...如果需要实现一个垂直的滚动列表，可以直接通过 SingleChildScrollView 包裹 Column 来实现，列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...: AppBar( title: Text('Single Child Demo'), ), body: SingleChildScrollView(...letters 不同而不同，这边就不贴效果图了，反正你可以看到一串列表......看命名就知道，值固定数量的，这个数量是只单排的数量 SliverGridDelegateWithMaxCrossAxisExtent 这个是设置最大宽度/高度，在这个值范围内取最大值，比如一排能给你排下
6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。...6.1.3 SingleChildScrollView组件 是一个只能包含单一子组件的可滚动组件，其作用类似于iOS的UIScrollView组件或Android的ScrollView组件。...: AppBar(title: Text('可滚动组件--SingleChildScrollView')), body: SingleChildScrollView(...ListView可以沿一个线性方向排布相同或相似的子组件元素，并支持基于Sliver的延迟。...其中，childrenDelegate是它的必传参数，需要传入一个实现了SliverChildDelegate抽象类的组件，用来给ListView组件添加列表项。
TabBar 标签栏默认居左，而 TabBar 默认是居中状态；和尚借此机会学习一下 TabBar 源码，稍微调整一下对齐方式； ACETabBar ACETabBarAlignType 对齐方式 和尚添加了一个...存放，最简单的方式，在 SingleChildScrollView 外添加可以设置对齐方式的 Container 即可； if (widget.isScrollable) { _scrollController...startIcon & endIcon 固定位图标 类似很多新闻类或商城类 app，在 TabBar 所在的左右两侧通常会有固定的图标或文字等小 Widget；而和尚也在设置完对齐方式后增加了...；而是否添加点击事件可以通过添加 Widget 时进行处理； Widget tabBar = CustomPaint( painter: _indicatorPainter, child...以及对应 indicator 标签指标的绘制及对应的滑动过程；其中在 TabBar 绘制过程中会用到 PreferredSizeWidget 小组件； PreferredSizeWidget 小组件作为一个抽象接口类
Container 的构造函数有一个名为decoration的参数，用于在 child 后面绘制装饰。对于该参数，您需要传递一个Decoration值。Flutter 中有一些Decoration类。...但是您也可以使用其他 ImageProvider，例如 MemoryImage、FileImage，或从资产加载图像。...appName, textField, ], ), ), 输出： image-20211202233138469 如果你想让背景图像不受键盘存在的影响，你可以将...: AppBar( title: const Text('坚果前端'), ), body: SingleChildScrollView( child...: AppBar( title: const Text('坚果前端'), ), body: SingleChildScrollView(
一个material 扩展面板。它有一个 header 和一个 body ，可以展开或折叠。面板的 body 仅在展开时可见。 扩展面板仅用作于 ExpansionPanelList。...: AppBar( title: Text('ExpansionPanelPage'), ), body: SingleChildScrollView(...Item 首先定义了一个 Item 类，里面包含了： expandedValue：展开的值 headerValue：header的值 isExpanded：是否已经展开 generateItems 生成指定数量的...: AppBar( title: Text('ExpansionPanelPage'), ), body: SingleChildScrollView( child...那为什么要用 SingleChildScrollView 包起来？ 我们先把 SingleChildScrollView 去掉来看一下效果： ?
Navigator.of(context).push() RefreshIndicator在ListView条目较少时不触发下拉刷新 RefreshIndicator是根据下拉时的偏移量触发刷新，当条目较少时(未占满一个屏幕...如果大于等于3个tab，这个有bug，最好不用 当前tab切到任意非相邻tab(如:第一个tab切换到第三个)，会报错 class ArticleListPageState extends State...在StatelessWidget或者StatefulWidget类中的参数必须使用final定义，否则Dart Analysis会报warning，因为StatelessWidget是不可变的，StatefulWidget...实例本身是不可变的，并将其可变状态存储在由createState方法创建的单独State对象中，或者存储在该State所订阅的对象中，例如Stream或ChangeNotifier对象，其引用存储在StatefulWidget...包装一下， 原来的是这样： return new Scaffold( appBar: new AppBar( title: new Text("搜索"
这个系列便是对 Flutter 绘制的探索，通过测试、调试及源码分析来给出一些在绘制时被忽略或从未知晓的东西，而有些要点如果被忽略，就很可能出现问题。...测试案例 如下，通过一个 SingleChildScrollView 包含一个自定义的画板组件。并在 ShapePainter#paint 中打印绘制日志，页面中并未涉及任何的刷新逻辑。...: AppBar(), body: SingleChildScrollView( child: Column( children: [...从这可以看出这是列表类滑动组件的默认行为，RepaintBoundary 并没有那么昂贵。 ? 你可以做一个测试，将 SingleChildScrollView 替换成 ListView 。...当然这些只是我遇到的，当你自定义的绘制出现卡顿或频繁重绘时，也要注意一下。 ---- 通过本文，你应该对 Flutter 中的绘制范围有了更深的认识。
---- SingleChildScrollView（可滑动 View） SingleChildScrollView 类似 Android 中的 scrollview ，且同样的只可包含有一个子元素...RepaintBoundary 时，在滚动过程中可以避免重绘，如果此列表项需要自己维护 KeepAlive 状态，那么此参数需为 false） addSemanticIndexes：表示是否给子元素添加索引...ListView.builder 当 listview 的列表项较多或数量未知时，就需要使用 ListView.builder 来构建列表了 import 'package:flutter/material.dart...ListView 分页加载 工程 yaml 文件中要添加 english_words 的依赖 # The following adds the Cupertino Icons font to your...RepaintBoundary 时，在滚动过程中可以避免重绘，如果此列表项需要自己维护 KeepAlive 状态，那么此参数需为 false） addSemanticIndexes：表示是否给子元素添加索引
Widget它是一个单独类，只能配合ExpansionPanelList使用。...: AppBar( title: Text("ExpansionPanelListDemo"), ), body: SingleChildScrollView(...: AppBar( title: Text("ExpansionPanelList"), ), body: SingleChildScrollView...: AppBar( title: Text("ExpansionPanelList"), ), body: SingleChildScrollView...那么如果你有这样的需求就还是要借助于ExpansionPanelList（）了。
在前面已经提到了，使用ExpansionPanelList.radio（）每次只能打开一个Item，当有一个item处于打开状态时在点击其他item就没有效果了，所以在这里我们依然要借助于ExpansionPanelList...: AppBar( title: Text("ExpansionPanelList"), ), body: SingleChildScrollView...简单的步骤 ---- 新建类继承于CustomPainter实现paint（）和shouldRepaint（）方法 在paint方法中绘制你想要的内容 借助于 CustomPaint Widget来构建自己的...画布canvas 画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法，结合这些方法我们可以绘制出千变万化的画面。...虽然，画布可以画这些东西，但是决定这些图形颜色、粗细表现的还是画笔。 画笔Paint Paint非常好理解，就是我们用来画图形的工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格。
可以通过选中/取消选中与其关联的复选框来选择或取消选择一个选项。 当按下升高的按钮时，将显示多选对话框。它让用户在编程中选择他们最喜欢的主题。所选主题将作为筹码显示在屏幕上。...以下是我们的应用程序的运行方式： 构建自定义多选小部件 创建一个名为MultiSelect的可重用小部件，它可以获取选项列表（您可以对这些项目进行硬编码或从数据库/API 中获取它们）： // Multi...}); } } @override Widget build(BuildContext context) { return Scaffold( appBar...button to open the multi-select dialog ElevatedButton( child: const Text('选出你最喜欢的技术...但是，如果您有紧急任务并且只想尽快进行多选，那么使用第三方插件是一个不错的选择。
MyApp 类中添加了一个 LoginDemo 类作为 home 属性的参数。...第二步：class LoginDemo 设定脚手架的 appBar 属性来作为应用的标题，如下： appBar: AppBar( title: Text('Login Page'), ), 在本次的...Column 中的第一个是存放 Container 挂件，用来处理 Image 挂件。...TextField 挂件是一个输入挂件，帮助我们处理用户的输入信息。...: AppBar( title: Text("Login Page"), ), body: SingleChildScrollView( child
你如果需要在两个方向上收缩包装（在滚动轴和横轴）例如 dialog或者 pop-up菜单，在这种情况下，你可以用SingleChildScrollView包裹孩子ListBody。...当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效...下面我们看一个例子：奇数行添加一条蓝色下划线，偶数行添加一条绿色下划线。...SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。...return Material( child: CustomScrollView( slivers: [ //AppBar，包含一个导航栏
再进入_debugReportException中一探究竟，你会发现，应用层的异常被catch之后，都是通过FlutterError.reportError来处理的。...: AppBar( title: const Text('出错了，请稍后再试'), ), body: SingleChildScrollView(...stack: stack, ), ); }, ); } 封装 下面我们将前面的异常处理方式都合并到一起，并针对EngineGroup的多入口处理，封装一个类...: AppBar( title: const Text('出错了，请稍后再试'), ), body: SingleChildScrollView...上报 在Flutter侧，我们只是获取了异常的相关信息，如果需要上报，那么我们需要借助Channel，桥接的Native，使用Bugly或其它平台进行上报，我们可以借助Pigeon来进行处理，还不熟悉的朋友可以参考我前面的文章
简介 我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面，从而达到页面调整的目的。...比如我们有一个主页面app的Navigator，然后里面有一个匹配好友的功能，这个功能有多个页面，因为匹配好友功能的多个页面实际上是一个完整的流程，所以这些页面需要被放在一个子Navigator中，并和主...super.key, }); @override Widget build(BuildContext context) { return Scaffold( appBar...: _buildAppBar(), body: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min...NavigatorState>(); 这里的_onGenerateRoute方法，跟主路由也是很类似的，主要定义的是子路由中页面的跳转： Route _onGenerateRoute(RouteSettings
系统会提供一个机会让通过 onSaveInstanceState 回调来你保存临时状态数据，这样可以保证下次用户进入时产生违和感。...也就是说，如果你一个 ListView 设置了 restorationId ，用户滑了一下后，按返回键退出，那么再进来时不会还原到原位置。...销毁 super.dispose(); } 在组件构建中，我们可以通过 _counter.value访问或操作数值。...@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const...那本文就到这里，更深层的 RestorationMixin 实现，以及其相关的其他类，还待继续研究，敬请期待。
SliverToBoxAdapter 还记得上节最后的代码中，有使用 SliverToBoxAdapter 这个部件吗，这个部件只需要传入一个 child 属性。...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢，可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理，当然没问题。...SliverPersistentHeaderDelegate 需要提供一个最大值，最小值，展示内容，以及更新部件条件 比如我们需要展示一个最大高度 300，最小高度 100，居中的文字，那么我们可以这么写这个代理类...SliverAppBar pinned: true, floating: true, // 因为 SliverPersistentHeaderDelegate 是一个抽象类...糟透了的翻译 X 2：最常用的情况，就是在其 headerSliverBuilder 中使用携带 TabBar 的 SliverAppBar（就是使用 SliverAppBar 的 bottom 属性添加
步骤三：添加依赖 对于我们 drawing_app 项目，我们需要 flutter_colorpicker 包，以允许用户来挑选颜色。...Scaffold( appBar: AppBar( title: const Text("Draw on Canvas"), actions: <Widget...context) { return AlertDialog( title: const Text('Choose a color'), content: SingleChildScrollView...类： DrawingPainter 目的：自定义画家类是基于 DrawingPoints 列表在画布上绘图。...我们可以通过添加更多的特性来扩展，比如调整画笔的大小，保存绘图或者添加更加复杂的手势。 这个教程为在 Flutter 中创建交互式图形应用程序提供了坚实的基础。
当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter 就会提示 Overflow 错误，为此，Flutter 提供了多种可滚动组件，用于显示列表和长布局； 可滚动组件都直接或间接的包含一个...风格的滚动指示器(滚动条)，如果要给可滚动组件添加滚动条，只需要将 Scroolbar 作为可滚动组件的任意一个父级组件即可，如： Scrollbar( child: SingleChildScrollView...，或者一个较短的文本) 时，不添加 RepaintBoundary 反而会更加高效。...，then 是异步执行完成的回调 还有问题可以参考这篇文章 最终的效果如下： 添加固定列表头 很多时候我们需要给列表添加一个固定表头，比如实现一个商品列表，就需要在列表添加一个 商品列表 标题 以往的经验告诉我...ListView 以填充屏幕剩余空间的方法吗？
另外，反过来，我们也能学到：如何在一个状态类中，监听到滑动通知的事件。...AppBar 状态类中的滑动干了什么 下面问题来了，_AppBarState 要监听滑动做什么？在平时的滑动过程中似乎 AppBar 并没有什么和滑动相关的东西。...你学废了吗？...AppBar 状态类构建组件的细节 对一个合成组件来说，最重要的还是构建逻辑，从其中可以看到组件在界面中表现一切本质细节。...---- 另外 AppBar 的 bottom 属性，本质上就是通过 Column 标题栏和底栏数值排列，并没有什么神奇的东西。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
