ListView头部有一段空白区域,是因为当ListView没有和AppBar一起使用时,头部会有一个padding,为了去掉padding,可以使用MediaQuery.removePadding:
1 | Widget _rubbishList(){ |
select * from learn
ListView头部有一段空白区域,是因为当ListView没有和AppBar一起使用时,头部会有一个padding,为了去掉padding,可以使用MediaQuery.removePadding:
1 | Widget _rubbishList(){ |
既然 Dart 是一门语言,那么就和我们所知道语言一样,有基本的数据类型以及常见的流程处理语法,那么我们就来了解下。
Dart 的所有东西都是对象,包括数字,函数等。它们都继承自 Object ,默认是都是 null(包括数字),所以数字,字符串都可以调用各种方法。
使用 var 声明变量,可赋予不同类型的值;未初始化时,默认值为 null ;使用 final 声明一个只能赋值一次的变量
1 | void main(){ |
在 dart 中使用 const 声明常量;使用 const 声明的必须是编译期常量。
1 | void main(){ |
查看dio文档发现需要设置代理
1 | (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (HttpClient client) { |
1 | # 网络请求框架 |
将此添加到包的pubspec.yaml文件中:
1 | dependencies: |
从命令行(或从您的编辑器)安装软件包:
1 | flutter pub get |
导入flutter_translate:
1 | 导入 'package:flutter_translate / flutter_translate.dart' ; |
将json本地化文件放置在项目中您选择的文件夹中。
默认情况下,flutter_translate
将assets/i18n
在项目根目录下的目录中搜索本地化文件。
在中声明您的资产本地化目录 pubspec.yaml
1 | flutter: |
在主函数中,创建本地化委托并启动应用,然后将其与LocalizedApp包装在一起
1 | void main() async |
如果本地化文件的资产目录与默认目录(assets/i18n
)不同,则需要指定它:
1 | var delegate = await LocalizationDelegate.create( |
示例MyApp:
1 | class MyApp extends StatelessWidget { |
父->子
定义父组件变量 data,在子组件Child的构造方法中把data值传进去,子组件接收data。
父->子
子组件接收callBack并调用callBack将data值传过去。
父组件定义onChanged,绑定到callBack中,接收子组件传过来的data值。
1 | class ParentState extends State<Parent> { |
1 | import 'dart:async'; |
1 | child: CustomBanner( |
1 | import 'package:ajbaby/res/colors.dart'; |
1 | body: CustomTabBar( |
本文首先讲的Flutter中的路由,然后主要讲下Flutter中栈管理的几种方法。
在Flutter中,我们需要在不同屏幕或者页面之间进行切换和发送数据,这些“screens”或者“pages”被称为Route(路由),是由一个Navigator的小部件进行管理。
Navigator可以管理包含若干Route对象的堆栈,并提供了管理的方法,平常我们经常用的就是[Navigator.push]和[Navigator.pop]。
尽管我们可以自己直接创建一个navigator,但是当我们创建一个WidgetsApp或者MaterialApp,Flutter会自动默认创建一个Navigator。
所以我们一般是使用由[WidgetsApp]或者[MaterialApp]所创建的Navigator就行了,然后通过调用[Navigator.of]
来拿到当前的Navigator的状态NavigatorState,然后调用它的pop或者push方法。
比如要导航到一个新的页面,我们可以创建一个[MaterialPageRoute]的实例,然后调用Navigator.of(context).push()方法就将新页面添加到堆栈的顶部。
返回上一个页面,则调用Navigator.pop(context)就可以从堆栈中删除这个屏幕;
1 | Navigator.of(context) |
源码中可以看到,AppBar只是实现了 PreferredSizeWidget接口
1 | class AppBar extends StatefulWidget implements PreferredSizeWidget |
那么我们也可以从这进行入手,自定义一个实现了 PreferredSizeWidget
的Widget
具体代码并不多,比你想象的简单,直接上代码:
1 | import 'package:flutter/material.dart'; |
1 | appBar: new CustomAppbar( |
leftBarButtonItemWidget()
rightBarButtonItemsWidget()
两个方法是我自定义的导航栏按钮,实现自己需要的即可。值得说的是,可以将leadingWidget设置为非@required的,在自定义的AppBar里面做好处理即可,另外在上面的代码中并没有限制导航栏上每个Widget所占用的最大空间,如果你的导航栏子组件可能很宽,提前进行妥善处理是个好主意。