学习Flutter(4)

最近看Dart，发现很多地方用了const，然后就去查了下Flutter里的const。

const 声明的变量是在编译时确定的，永远不会改变。也就是说编译器提前就知道了该如何存储这个变量的值。对于 const 声明的变量可以自动推断变量的类型。

final 声明的变量也是不可更改的。这里有个区别在于final 声明的变量允许声明后再赋值，赋值后不可改变。比如我们声明 final 类型的变量时，可以先不赋值，甚至可以通过构造函数来初始化。

final int a;
a = 1;

// 构造方法
class FinalDemo {
  final name;
  FinalDemo({required this.name});
}

这说明 final 声明的变量是在运行时确定的。

实际上，声明为 const 时就是告诉编译器，这个变量在整个代码的生命周期中都不会改变，因此只需要给这个变量创建一个副本，其他任何地方使用这个变量的时候都指向该副本，而不是创建一个新对象。Flutter 不会重建构建 const 组件。
遵循一个原则 —— 尽可能地将组件的属性声明为 final ，构造方法声明为const，并且使用 const 使用这样的组件对象。

下面来写今天的demo

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  const MyButton({super.key});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print("button tapped");
      },
      child: Container(
        height: 50,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: const Center(
          child: Text('这是一个自定义按钮'),
        ),
      ),
    );
  }
}

这里新创建一个文件，自定义一个button。
在上一篇的demo里把body替换成这个样子

body: const Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Hello world'),
                MyButton(),
              ],
            )
      ),

效果图
其中Row可以换成Column, Column为上下排列。

可以再加一个TextField，TextField里的属性如下

const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.obscureText = false,//是否隐藏文本，即显示密码类型
    this.maxLines = 1,//最多行数，高度与行数同步
    this.autofocus = false,//自动聚焦
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型，即输入类型
    this.onChanged,//输入改变回调

    //以下属性不常用,用到再来查看
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//对齐方式
    this.textDirection,
    this.autocorrect = true,//自动更正
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,//最多输入数，有值后右下角就会有一个计数器
    this.maxLengthEnforced = true,
    this.onEditingComplete,//输入完成时，配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    this.inputFormatters,//输入校验
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光标宽度
    this.cursorRadius,//光标圆角
    this.cursorColor,//光标颜色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,//点击事件
    this.buildCounter,
    this.scrollPhysics,
  }) 

明天详细研究下TextField控件的用法。

参考链接： https://www.jianshu.com/p/d4ea99eae8cd
https://www.jianshu.com/p/8bac3d2a4e63/