Flutter学习笔记

此篇文章用来记录学习Flutter 和 Dart 相关知识


零.Dart基本数据类型

Dart 是一种静态类型的编程语言,它提供了一系列基本数据类型,用于存储和操作不同种类的数据。以下是 Dart 中的一些基本数据类型以及它们的详细介绍:

1. 整数类型(Integer):

Dart 提供了两种整数类型:int 和 num。
int 表示整数,可以存储正数、负数和零。
num 是 int 和 double 的超类型,可以用来表示整数和浮点数。

int age = 30;
num temperature = 98.6;

2. 浮点数类型(Double):

Dart 中的浮点数类型为 double,用于表示带有小数点的数值。

double pi = 3.14159;

3.字符串类型(String):

字符串类型用于表示文本数据。
字符串可以由单引号或双引号包围。

String greeting = 'Hello, Dart!';

4.布尔类型(Boolean):

布尔类型只有两个值:true 和 false,用于表示逻辑真值和假值。

bool isDartFun = true;

5.列表类型(List):

列表是有序的数据集合,可以包含不同类型的元素。
列表使用方括号 [] 定义,并可以通过索引访问元素。

List<int> numbers = [1, 2, 3, 4, 5];

6.映射类型(Map):

映射是一组键值对的集合,其中每个键都与一个值相关联。
映射使用大括号 {} 定义。

Map<String, int> grades = {'Alice': 90, 'Bob': 85, 'Carol': 92};

7.符号类型(Symbol):
符号类型用于表示运行时的标识符或运算符。
符号使用 # 符号前缀定义。

Symbol mySymbol = #myIdentifier;

8.空类型(Null):

Dart 有一个特殊的数据类型 Null,表示一个空值或缺失值。
在非空安全(null-safe)的 Dart 中,所有的变量默认都不可以为 null,需要使用 ? 明确标记为可为 null。

String? nullableString = null; // 可为 null 的字符串

9.动态类型(Dynamic):

dynamic 是 Dart 中的一个特殊类型,可以存储任意类型的数据。
使用 dynamic 声明的变量可以在运行时改变其类型。

dynamic dynamicVariable = 42;
dynamicVariable = 'Hello';

这些是 Dart 中的一些基本数据类型。Dart 还支持更多高级数据类型,例如函数、类、枚举等,以便更灵活地处理各种数据和逻辑。此外,Dart 2.12 引入了非空安全(null safety)功能。
注意
Dart 中没有专门的字节数据类型,而是使用 int 来表示字节值,因为 Dart 的整数类型 int 可以存储 8 位的无符号整数,正好对应一个字节。如果你需要表示多个字节的数据,可以使用列表 (List) 或字节数组 (Uint8List,通常需要导入 dart:typed_data 库)。

一.Dart 一些语法

const:关键字,用于声明一个编译时常量

变量声明
const int x = 5;

构造函数: 用于声明一个可以在编译时确定值的常量构造函数。
class MyClass {
  final int value;
  const MyClass(this.value);
}

数组和映射字面量: 可以用 const 声明编译时常量的数组和映射。
const List<int> numbers = [1, 2, 3];
const Map<String, int> scores = {'John': 100, 'Jane': 90};

继承关系
dart有三种方式,分别是extends(继承),with(混入) ,implements(实现),三种可以混合使用,其中with,implements后可以多继承,用逗号隔开,extends后面只能跟一个,优先级顺序为with>extends>implements,当with,implements后跟了多个的时候,优先级最右边大于左边,依次类推,例如extends a with b,c implements d,h,优先级为c>b>a>h>d;

函数可选参数
与java不同,dart中不支持重载,java支持方法重载,dart想要实现java类似的效果,可以通过可选参数来实现

selectFunction("张三");
selectFunction("李四",type: 1);
selectFunction("王五",type: 1,money: 83.2);

void selectFunction(String name,{int? type,double? money}){
  print("名字:$name--类型:$type--金额:$money");
}
//注意dart可选参数必须要加?来表示该参数默认值为null,如果去掉?可以手动写个默认值,例如
void selectFunction(String name,{int type = 0,double? money}){
  print("名字:$name--类型:$type--金额:$money");
}
//输出结果:名字:张三--类型:null--金额:null
//名字:李四--类型:1--金额:null
//名字:王五--类型:1--金额:83.2


二.Flutter 中的一些基础小部件

Center(居中对齐小部件):

Center小部件用于在可用空间内使其子小部件水平和垂直居中对齐。它接受一个需要居中的子小部件。Center小部件将扩展以填充父小部件的所有可用空间,并在该空间内居中其子小部件。

Center(
  child: Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 24.0),
  ),
)

Text(文本小部件):

Text小部件用于在屏幕上显示一行文本。可以自定义文本的样式,例如字体大小、颜色和对齐方式。通过将字符串传递给Text小部件的data参数,可以设置文本的内容。

常用的Text属性:

  • data(String):要显示的文本内容。
  • style(TextStyle):定义文本的样式,如字体、大小、颜色等。
  • textAlign(TextAlign):指定文本在水平方向上的对齐方式。
    –TextAlign.left:文本左对齐。
    –TextAlign.right:文本右对齐。
    –TextAlign.center:文本居中对齐。
    –TextAlign.justify:文本两端对齐,会调整单词和字之间的间隔。
  • textDirection(TextDirection):指定文本的方向,如从左到右或从右到左。
  • textScaleFactor(double):指定文本的缩放比例。
  • maxLines(int):指定允许的最大行数,超过将使用"…"截断。
  • overflow(TextOverflow):定义文本溢出时的处理方式。
  • softWrap(bool):指定文本是否自动换行。
 body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),

Button(按钮)

RaisedButton

RaisedButton 是一个具有凸起效果的按钮,通常用于主要操作。

它具有各种自定义属性,如 onPressed、child、color、disabledColor、textColor 等,以定制外观和行为。

RaisedButton(
  onPressed: () {
    // 按钮被点击时执行的操作
  },
  child: Text('Submit'),
)

FlatButton

FlatButton 是一个扁平化的按钮,通常用于次要操作。

它有类似于 RaisedButton 的自定义属性,可以根据需求进行定制。

FlatButton(
  onPressed: () {
    // 按钮被点击时执行的操作
  },
  child: Text('Cancel'),
)

OutlineButton

OutlineButton 是一个带有边框的按钮,通常用于取消操作或与背景区分。

它也有类似于 RaisedButton 的自定义属性,以便自定义外观和行为。

OutlineButton(
  onPressed: () {
    // 按钮被点击时执行的操作
  },
  child: Text('Clear'),
)

FloatingActionButton

FloatingActionButton 是一个圆形的浮动操作按钮,常用于应用程序的主要操作。

它也具有各种自定义属性和样式,可以根据需求进行调整。

FloatingActionButton(
  onPressed: () {
    // 按钮被点击时执行的操作
  },
  child: Icon(Icons.add),
)

IconButton

IconButton 是一个只包含图标的按钮,通常用于具有图标表示的操作。

它也有各种自定义属性和样式,以便自定义外观和行为。

IconButton(
  onPressed: () {
    // 按钮被点击时执行的操作
  },
  icon: Icon(Icons.favorite),
)

Container(容器小部件):

Container小部件是一个多用途灵活的小部件,可以包含其他小部件。允许自定义属性,如宽度、高度、填充、边距、颜色等,以控制其子小部件的布局和外观。它还可以对子小部件应用变换、装饰和约束。

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Hello, Flutter!',
      style: TextStyle(fontSize: 24.0, color: Colors.white),
    ),
  ),
)

RowColumn(行和列小部件):

这些布局小部件用于将其子小部件按水平(Row)或垂直(Column)线排列。它们可以包含多个子小部件,并根据子小部件的属性和可用空间自动调整大小和位置。可以使用特定参数控制子小部件的对齐方式、间距和调整大小的行为。

Row小部件具有以下一些常用的属性:

  • children(List:需要包含在Row中的子部件列表。
  • mainAxisAlignment(MainAxisAlignment):子部件在主轴方向上的对齐方式,默认是start。
  • crossAxisAlignment(CrossAxisAlignment):子部件在交叉轴方向上的对齐方式,默认是start。
  • mainAxisSize(MainAxisSize):Row在主轴方向上的大小约束,默认是MainAxisSize.max。
  • textDirection(TextDirection):子部件的文本方向,默认是TextDirection.ltr。
  • verticalDirection(VerticalDirection):子部件在垂直方向上布局的方向,默认是VerticalDirection.down。
 body: Row(
          mainAxisAlignment: MainAxisAlignment.center, // 在水平方向上居中对齐
          crossAxisAlignment: CrossAxisAlignment.start, // 在垂直方向上上对齐
          mainAxisSize: MainAxisSize.min, // 占用尽可能少的水平空间
          textDirection: TextDirection.ltr, // 子部件的文本方向从左到右
          verticalDirection: VerticalDirection.down, // 从上到下布局
          children: [
            Text(
              'First Item',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(width: 20), // 在子部件之间增加间距
            Text(
              'Second Item',
              style: TextStyle(fontSize: 24),
            ),
            Container(
              color: Colors.blue,
              width: 200,
              height: 200,
              child: Text(
                'Third Item',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),

Column小部件具有以下一些常用的属性:

  • children(List:需要包含在Column中的子部件列表。
  • mainAxisAlignment(MainAxisAlignment):子部件在主轴方向上的对齐方式,默认是start。
  • crossAxisAlignment(CrossAxisAlignment):子部件在交叉轴方向上的对齐方式,默认是start。
  • mainAxisSize(MainAxisSize):Column在主轴方向上的大小约束,默认是MainAxisSize.max。
  • verticalDirection(VerticalDirection):子部件在垂直方向上布局的方向,默认是VerticalDirection.down。
body: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 在垂直方向上居中对齐
          crossAxisAlignment: CrossAxisAlignment.start, // 在水平方向上左对齐
          mainAxisSize: MainAxisSize.min, // 占用尽可能少的垂直空间
          verticalDirection: VerticalDirection.down, // 从上到下布局
          children: [
            Text(
              'First Item',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20), // 在子部件之间增加间距
            Text(
              'Second Item',
              style: TextStyle(fontSize: 24),
            ),
            Container(
              color: Colors.blue,
              width: 200,
              height: 200,
              child: Text(
                'Third Item',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),

Image(图像小部件):

Image小部件用于在屏幕上显示图像。它支持各种图像来源,例如本地资源、网络图像和内存图像。可以自定义其属性,如大小、缩放和对齐方式,以及处理加载和错误状态。

Image(
  image: AssetImage('assets/images/flutter_logo.png'),
  width: 100.0,
  height: 100.0,
)

StatelessWidgetStatefulWidget

StatelessWidget:
StatelessWidget是一种无状态的小部件,意味着它在创建后是不可变的,不会随时间改变。它基于构建函数的输入参数,一旦构建完成,就渲染出静态的用户界面。简单来说,StatelessWidget没有内部状态(state)。

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  final String text;

  MyWidget({required this.text});

  
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }
}

StatefulWidget:
StatefulWidget是一种有状态的小部件,它的内部状态可以随时间变化,所以它可以在创建后重新构建。StatefulWidget由两个部分组成:一个是State对象,用于保存和管理小部件的状态,另一个是StatefulWidget类本身,用于构建小部件的UI。

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

GestureDetector

用于处理用户手势和触摸事件。它可以用于识别和响应各种手势,如点击、长按、拖动、缩放和滑动等。GestureDetector 可以包裹任何其他小部件,并通过回调函数来响应不同的手势事件。

GestureDetector 的常用属性和介绍:

  • onTap: 当用户轻触手势时触发的回调函数。
  • onDoubleTap: 当用户双击手势时触发的回调函数。
  • onLongPress: 当用户长按手势时触发的回调函数。
  • onLongPressMoveUpdate: 当用户在长按手势的情况下移动时触发的回调函数。
  • onVerticalDragDown: 当用户在垂直方向开始拖动手势时触发的回调函数。
  • onVerticalDragEnd: 当用户在垂直方向结束拖动手势时触发的回调函数。
  • onScaleStart: 当用户开始缩放手势时触发的回调函数。
  • onScaleUpdate: 当用户进行缩放手势时触发的回调函数。
  • behavior: 用于指定如何识别和处理手势事件的 HitTestBehavior。

使用示例:

import 'package:flutter/material.dart';

class MyGestureDetector extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return GestureDetector(
      // 点击事件
      onTap: () {
        print('onTap');
      },
      // 双击事件
      onDoubleTap: () {
        print('onDoubleTap');
      },
      // 长按事件
      onLongPress: () {
        print('onLongPress');
      },
      // 缩放手势
      onScaleStart: (details) {
        print('onScaleStart: ${details.focalPoint}');
      },
      onScaleUpdate: (details) {
        print('onScaleUpdate: ${details.focalPoint}, ${details.scale}');
      },
      onScaleEnd: (details) {
        print('onScaleEnd: ${details.velocity}');
      },
      // 拖动手势
      onPanStart: (details) {
        print('onPanStart: ${details.globalPosition}');
      },
      onPanUpdate: (details) {
        print('onPanUpdate: ${details.globalPosition}');
      },
      onPanEnd: (details) {
        print('onPanEnd: ${details.velocity}');
      },
      // 指针击中测试
      behavior: HitTestBehavior.opaque,
      // 点击区域的命中测试
      hitTestBehavior: HitTestBehavior.translucent,
      // 排除特定手势
      excludeFromSemantics: true,
      // 双击事件的时间窗口
      doubleTapTimeout: Duration(milliseconds: 300),
      // 长按事件的时间窗口
      longPressTimeout: Duration(milliseconds: 500),
      // 长按事件的触发间隔
      longPressMoveUpdateDelay: Duration(milliseconds: 200),
      // 其它属性
      dragStartBehavior: DragStartBehavior.start,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}


三.对齐 widgets

mainAxisAlignmentcrossAxisAlignment是用于定位和对齐子部件的属性,它们通常用于Flex、Row和Column等布局小部件中。
Flutter学习笔记_第1张图片
mainAxisAlignment的值可以是以下之一:

  • MainAxisAlignment.start:将子部件沿主轴的起始位置对齐。
  • MainAxisAlignment.end:将子部件沿主轴的结束位置对齐。
  • MainAxisAlignment.center:将子部件沿主轴的中心位置对齐。
  • MainAxisAlignment.spaceBetween:将子部件均匀地分布在主轴上,使它们之间的间距相等,第一个子部件放置在起始位置,最后一个子部件放置在结束位置。
  • MainAxisAlignment.spaceAround:将子部件均匀地分布在主轴上,使它们之间和两端的间距相等。
  • MainAxisAlignment.spaceEvenly:将子部件均匀地分布在主轴上,使它们之间的间距和两端的间距相等。

mainAxisAlignment使用示例:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 50),
  ],
)

crossAxisAlignment的值可以是以下之一:

  • CrossAxisAlignment.start:将子部件沿副轴的起始位置对齐。
  • CrossAxisAlignment.end:将子部件沿副轴的结束位置对齐。
  • CrossAxisAlignment.center:将子部件沿副轴的中心位置对齐。
  • CrossAxisAlignment.stretch:将子部件沿副轴拉伸以填充可用空间。
  • CrossAxisAlignment.baseline:将子部件的基线与副轴上的基准线对齐,需要在子部件上设置基线对齐方式(如TextBaseline)。

crossAxisAlignment使用示例:

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    Container(color: Colors.green, width: 50, height: 50),
    Container(color: Colors.blue, width: 50, height: 50),
  ],
)


四.调整widgets大小

Expanded widget
用于在父部件的剩余可用空间中扩展一个子部件。它通常与Flex、Column或Row等灵活的布局小部件一起使用,以便在父部件中使用弹性盒子模型进行布局。

当Expanded小部件包装在一个子部件周围时,它会将该子部件填充并扩展到可用空间的剩余部分,以沿着主轴方向占据所有剩余的空间。这使得子部件能够灵活地从父部件中分配和占据可用空间,而不受其自身固定大小的限制。

使用示例

Row(
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    Expanded(
      child: Container(color: Colors.green),
    ),
    Container(color: Colors.blue, width: 50, height: 50),
  ],
)

Flex
Flex用于创建灵活的布局,可以根据可用空间的大小动态调整子部件的大小。可以将 Flex 小部件作为Expanded的子部件,并通过指定flex属性来控制子部件在可用空间中的分配比例。
可以简单理解为LinearLayout中的权重

使用示例

Row(
  children: [
    Container(color: Colors.red, width: 50, height: 50),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

当一个Expanded组件包含在一个垂直方向(或水平方向)的Flex容器(如Column或Row)中时,该Expanded组件会将其子组件填充到相应方向上的所有可用空间。如果有多个垂直方向的Expanded组件,则它们会按照它们的flex属性(默认为1)来分配可用空间。

换句话说,Expanded组件在默认情况下会尽可能地扩展,以填充Flex容器中剩余的可用空间,但具体的高度取决于Flex容器的大小和其他子组件的约束条件

五.通用布局 widgets

标准 widgets

  • Container:向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。

  • GridView:将 widget 展示为一个可滚动的网格。

  • ListView:将 widget 展示为一个可滚动的列表。

  • Stack:将 widget 覆盖在另一个的上面。

Material widgets

  • Card:将相关信息整理到一个有圆角和阴影的盒子中。

  • ListTile:将最多三行的文本、可选的导语以及后面的图标组织在一行中。


六.输入表单

TextField (文本框)

用于接收用户输入文本的小部件,它提供了一个可编辑的文本框,用户可以在其中输入、编辑和选择文本。

常用的属性及其作用:

  1. controller: 一个 TextEditingController 对象,用于控制文本输入框的值,获取输入的内容或设置初始值。
  2. focusNode: 一个 FocusNode 对象,用于管理输入框的焦点。
  3. decoration: InputDecoration 类型的对象,用于定义输入框的外观,包括标签文本、提示文本、边框样式等。
  4. keyboardType: TextInputType 枚举类型,指定键盘的类型,以匹配输入的预期内容,如文本、数字、URL、电子邮件等。
  5. textInputAction: TextInputAction 枚举类型,定义了与输入框关联的操作按钮的行为,如完成、下一步、搜索等。
  6. onChanged: 输入内容变化时的回调函数,接受最新的输入值作为参数,通常用于实时校验或更新状态。
  7. onSubmitted: 用户提交输入后的回调函数,接受最终的输入值作为参数。
  8. obscureText: bool 值,用于指定是否要隐藏输入内容,常用于密码输入框。
  9. maxLines: int 值,用于指定输入框的最大行数。
  10. maxLength: int 值,用于指定最大输入长度。
  11. enabled: bool 值,用于指定输入框是否可编辑。
  12. autofocus: bool 值,用于指定是否自动获取焦点。
  13. textAlign: TextAlign 枚举类型,指定文本内容的对齐方式,如左对齐、右对齐、居中等。
  14. cursorColor: Color 对象,指定光标的颜色。
  15. cursorWidth: double 值,用于指定光标的宽度。

使用示例:

import 'package:flutter/material.dart';

class MyTextField extends StatefulWidget {
  
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController _controller = TextEditingController();
  FocusNode _focusNode = FocusNode();

  
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      focusNode: _focusNode,
      decoration: InputDecoration(
        labelText: 'Enter your name',
        hintText: 'John Doe',
        prefixIcon: Icon(Icons.person),
        suffixIcon: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            _controller.clear();
          },
        ),
        border: OutlineInputBorder(),
      ),
      keyboardType: TextInputType.text,
      textInputAction: TextInputAction.done,
      onChanged: (value) {
        print('Input: $value');
      },
      onSubmitted: (value) {
        print('Submitted: $value');
        _focusNode.unfocus();
      },
    );
  }
}

关于TextEditingController和FocusNode的介绍:

TextEditingController
TextEditingController是一个控制文本输入的类,它提供了一些方法和属性来获取和修改TextField中输入的文本。主要作用包括:

  • 可以获取TextField中的文本内容:使用text属性可以获取TextField中当前的文本内容。
  • 可以设置TextField的初始值或修改文本内容:使用text属性可以设置TextField的初始值,也可以通过textEditingController.text = newText来修改文本内容。
  • 可以监听文本变化:可以通过注册addListener()方法来监听TextField中的文本变化,以便执行特定的操作。

FocusNode
FocusNode是用于处理TextField焦点的类,它允许管理应用程序中的焦点,并监听焦点变化事件。主要作用包括:

  • 管理TextField的焦点:通过将TextField的focusNode属性设置为FocusNode对象,可以管理TextField的焦点。例如,可以使用focusNode.requestFocus()请求焦点,并使用focusNode.unfocus()取消焦点。
  • 监听焦点变化:可以通过注册addListener()方法来监听焦点的变化,以便在焦点状态发生变化时执行特定的操作,比如显示或隐藏键盘。
  • 控制键盘行为:通过设置keyboardType和textInputAction属性,可以控制键盘的类型(例如纯文本、数字等)和键盘完成按钮的样式(例如完成、下一个等)。

TextFormField (表单文本框)

TextFormField 是一个带有表单功能的文本输入字段小部件。它是基于 TextField 的封装,并提供了一些额外的功能,如表单验证和错误处理。

常用属性及其作用:

  1. controller: 一个 TextEditingController 对象,用于控制文本输入框的值,获取输入的内容或设置初始值。

  2. focusNode: 一个 FocusNode 对象,用于管理输入框的焦点。

  3. decoration: InputDecoration 类型的对象,用于定义输入框的外观,包括标签文本、提示文本、边框样式等。

  4. keyboardType: TextInputType 枚举类型,指定键盘的类型,以匹配输入的预期内容,如文本、数字、URL、电子邮件等。

  5. textInputAction: TextInputAction 枚举类型,定义了与输入框关联的操作按钮的行为,如完成、下一步、搜索等。

  6. validator: 一个函数,接受输入的字符串,根据需求返回一个错误提示字符串,用于对输入内容进行验证。

  7. onChanged: 输入内容变化时的回调函数,接受最新的输入值作为参数,通常用于实时校验或更新状态。

  8. onFieldSubmitted: 用户提交输入后的回调函数,接受最终的输入值作为参数。

使用示例:

import 'package:flutter/material.dart';

class MyForm extends StatefulWidget {
  
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController _nameController = TextEditingController();
  
  
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: TextFormField(
        controller: _nameController,
        decoration: InputDecoration(
          labelText: 'Name',
          hintText: 'Enter your name',
        ),
        validator: (value) {
          if (value.isEmpty) {
            return 'Please enter your name';
          }
          return null;
        },
        onFieldSubmitted: (value) {
          if (_formKey.currentState.validate()) {
            // 执行提交操作
          }
        },
      ),
    );
  }
}


七.关键词

part

用于将多个Dart文件组织在一起,以便更好地管理和维护代码。

part 指令是Dart语言的一部分,它允许你将一个Dart文件分成多个部分,并将它们组合在一起以形成一个完整的库。这对于将大型代码库分解为更小的可管理部分非常有用。

part ‘WeiBoCommentList.g.dart’; 表示当前的Dart文件是一个库的一部分,并且需要引入另一个名为 WeiBoCommentList.g.dart 的Dart文件,以共享一些代码或声明。

通常,part 指令在使用代码生成工具时非常有用,例如json_serializable或moor_generator。这些工具可以根据模型类自动生成代码,而将生成的代码放在单独的文件中,然后使用 part 指令将其引入到主要的模型文件中。

例如,假设 WeiBoCommentList.g.dart 包含自动生成的序列化或数据库访问代码,而 WeiBoCommentList.dart 包含模型类的定义。通过使用 part 指令,你可以将自动生成的代码与手动编写的代码分离开来,以便更轻松地维护和管理项目。

Completer

Completer 是一个用于处理异步操作的类,它允许你手动控制异步操作的完成和结果返回。Completer 的主要作用是创建一个 Future 对象,并允许你在某个后续时刻手动完成这个 Future,从而传递一个值或错误。

以下是 Completer 的主要作用:

  1. 手动完成 Future:使用 Completer,你可以创建一个未来的实例,并在需要的时候手动完成它。这对于异步操作,如网络请求、文件读写等,非常有用,因为你可以在操作完成后通过 Completer 将结果传递给等待的代码。

  2. 处理异步操作的结果:当你使用异步操作时,通常需要等待操作完成并获取结果。通过 Completer 创建的 Future,你可以使用 await 关键字或 .then() 方法等方式来等待操作完成,并获取其结果。

示例:

import 'dart:async';

Future<void> fetchData() async {
  Completer<void> completer = Completer<void>();

  // 模拟一个异步操作,等待2秒钟后完成
  Future.delayed(Duration(seconds: 2), () {
    completer.complete(); // 手动完成Future
  });

  await completer.future; // 等待Future完成

  print('Data fetched successfully');
}

void main() {
  fetchData();
  print('Fetching data...'); // 这一行会在异步操作完成前执行
}

StreamSubscription

StreamSubscription 是使用 Dart 中的流(Stream)的一种方式。流是一系列异步事件的序列,可以用于接收和处理来自异步操作(如网络请求、数据库查询等)的事件。

StreamSubscription 用于订阅流,并可以跟踪和取消订阅。当你订阅一个流时,你可以指定一个回调函数来处理流中发出的事件。回调函数会在每个事件到达时被调用,而不是等待整个流完成。

订阅流

要订阅流,首先需要获取一个流对象。在Flutter中,很多类(如StreamController、StreamTransformer等)都提供了流的实例化和管理。一旦获取到流对象,你可以使用stream.listen()方法订阅流,并提供一个回调函数来处理流中的事件。

Stream<int> countStream() async* {
  for (int i = 1; i <= 5; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

void main() {
  final stream = countStream();
  final subscription = stream.listen((data) {
    print('Received: $data');
  });

  // 取消订阅
  subscription.cancel();
}

上面的示例中,创建了一个简单的计数流countStream(),它每隔一秒产生一个整数。我们通过stream.listen()方法订阅了这个流,并提供了一个回调函数来处理每个事件。

取消订阅

当不再需要订阅流时,应该显式地取消订阅,以释放资源和停止事件的处理。可以调用StreamSubscription对象的cancel()方法来取消订阅。

final subscription = stream.listen((data) {
  print('Received: $data');
});

// 取消订阅
subscription.cancel();

在上面的示例中,保存了StreamSubscription对象到subscription变量中,并在不再需要时调用了cancel()方法来取消订阅。

使用StreamSubscription的其他方法和属性

StreamSubscription提供了一些其他有用的方法和属性,用于管理订阅和检查流的状态,例如:

  • pause()resume():暂停和恢复订阅,以便控制事件的处理。
  • onData():设置一个新的事件回调函数,替换原来的回调函数。
  • onError():设置一个错误回调函数,用于处理流中的错误事件。
  • onDone():设置一个完成回调函数,用于处理流结束时的事件。
  • isPaused:一个布尔值,表示当前订阅是否已暂停。

mixin

Mixin是一种强大的代码重用机制,它允许你将一个类的成员添加到另一个类中,而无需继承该类。Mixin提供了一种方式来在类之间共享代码,同时保持类之间的分离性。

1. 基本语法
class MyClass with MyMixin {
  // 类的成员和方法
}

mixin MyMixin {
  // Mixin中的成员和方法
}

在上面的代码中,MyClass类通过with MyMixin语法引入了MyMixin的功能。

2. Mixin的特点
  • Mixin类本身不能被实例化,它们只能被用作其他类的组成部分。
  • 类可以使用多个Mixin,通过逗号分隔,这允许多个类的功能被组合到一个类中。
  • Mixin可以有自己的属性和方法,这些属性和方法可以被包含Mixin的类访问和使用。
  • 如果多个Mixin中有同名的方法或属性,那么包含Mixin的类必须通过显式指定使用哪个Mixin的方式来解决冲突。
  • Mixin的顺序很重要,因为方法冲突时会按照Mixin的顺序来解析。
3. Mixin的应用场景
3.1. 接口实现

Mixin可以用于实现接口,允许一个类同时具有多个接口的功能。

class MyWidget with WidgetMixin, ClickableMixin {
  // ...
}
3.2. 功能复用

Mixin可以用于将通用功能添加到多个类中,避免重复编写相似的代码。

mixin LoggerMixin {
  void log(String message) {
    print(message);
  }
}

class MyClass with LoggerMixin {
  // ...
}
3.3. 数据序列化与反序列化

Mixin可以用于为多个数据模型类添加数据序列化和反序列化的功能。

mixin JsonSerializable {
  Map<String, dynamic> toJson();
  void fromJson(Map<String, dynamic> json);
}

class Person with JsonSerializable {
  // ...
}
3.4. 路由导航

在Flutter中,Mixin经常用于处理路由导航,以减少页面之间的代码冗余。

3.5. 状态管理

在Flutter中,StatefulWidget常常使用Mixin来添加状态管理的功能。

with

with关键字用于在类定义中混入(mixin)一个或多个 mixin 类。Mixin 是一种在 Dart 中实现代码重用的机制,它允许你将一个或多个 mixin 类的特性添加到一个类中,而无需继承这些 mixin 类。

使用方式:

class MyClass with Mixin1, Mixin2, ... {
  // 类的成员和方法
}

关于 with 关键字的详细介绍:

  1. 混入Mixin的类:with 后面可以跟一个或多个 mixin 类,用逗号分隔。这意味着你可以从多个 mixin 类中继承特性,将它们组合到一个类中,从而实现多重继承的效果。

  2. Mixin的顺序:Mixin 的顺序很重要,因为如果多个 mixin 类中具有相同名称的属性或方法,类中将使用最后一个 mixin 中定义的属性或方法。这个规则确保了 mixin 类的顺序对类的行为产生影响。

  3. Mixin的特性:通过使用 with 关键字,类将继承 mixin 类的属性、方法和功能,这些特性会被添加到类中。这允许你在不继承 mixin 类的情况下,使用 mixin 类的功能。

  4. Mixin的用途:with 关键字通常用于以下情况:

  • 实现接口:通过混入一个 mixin 类,类可以实现多个接口的功能。
  • 代码复用:可以将通用功能添加到多个类中,以减少代码重复性。
  • 实现混合功能:在不使用多重继承的情况下,将多个 mixin 类的功能组合在一个类中。

dynamic和Object

1、Object 是dart所有对象的根基类,也就是说所有类型都是Object的子类,所以任何类型的数据都可以赋值给Object声明的对象.
2、dynamic与var一样都是关键词,声明的变量可以赋值任意对象. 而dynamic与Object相同之处在于,他们声明的变量可以在后期改变赋值类型.

typedef

用于创建自定义类型别名(type alias)。类型别名允许你为现有的数据类型或函数签名定义一个新的名称,以便在代码中更清晰地表达类型或函数签名的含义

以下是关于typedef关键字的详细介绍:

  1. 为数据类型创建类型别名:
typedef IntList = List<int>;
typedef StringMap = Map<String, String>;

  1. 为函数签名创建类型别名:
    对于回调函数或函数参数特别有用
typedef VoidCallback = void Function();
typedef BinaryOperation = int Function(int, int);

  1. 与高阶函数一起使用:
typedef FilterFunction<T> = bool Function(T);

List<T> filterList<T>(List<T> list, FilterFunction<T> filter) {
  return list.where(filter).toList();
}

get

get关键字用于创建一个Getter方法,它允许你访问对象的属性或计算属性的值,就像访问类的实例变量一样。Getter方法通常用于获取对象的某个属性值,而不是直接访问实例变量,以提供更多的封装和控制。

1.创建Getter方法:通过在类中定义一个以get关键字开头的方法,你可以创建一个Getter方法,该方法用于获取某个属性的值。Getter方法的语法如下:

Type get propertyName {
  // 在这里计算和返回属性的值
}

其中,Type是属性的数据类型,propertyName是你希望暴露的属性名称。

2.延迟加载属性:Getter方法可以用于延迟加载属性的值。这意味着属性的值只有在首次访问Getter方法时才会计算,而不是在对象创建时。这对于节省资源和提高性能很有用。

class LazyLoader {
  List<int> _data = [1, 2, 3, 4];

  int get sum {
    // 计算并返回列表元素的总和
    return _data.reduce((a, b) => a + b);
  }
}

3.属性访问控制:使用Getter方法可以对属性的访问进行控制,例如,你可以在Getter方法中添加条件来检查属性的有效性,然后返回相应的值。

class Temperature {
  double _celsius;

  Temperature(this._celsius);

  double get celsius {
    if (_celsius < -273.15) {
      throw ArgumentError("Temperature cannot be below absolute zero.");
    }
    return _celsius;
  }
}

4.在子类中覆盖:Getter方法可以在子类中被覆盖,允许你根据需要自定义子类的属性访问行为。

class Parent {
  int get value => 42;
}

class Child extends Parent {
  
  int get value => super.value * 2; // 在子类中覆盖Getter方法
}


未完待续…

你可能感兴趣的:(Flutter,flutter,学习,笔记)