Flutter学习笔记：基础控件的使用

flutter是一款移动应用跨平台框架，使用Dart语言编写的一份代码可以生成iOS和Android两个高性能、高保真的应用程序。Flutter不借助原生的渲染能力，而是自己实现了一套与Android和iOS一样的渲染原理，从而在性能上与原生平台基本保持一致。目前Flutter支持了iOS、Android，Windows、linux、macOS、Web平台的运行。

项目源码:点击下载

1、项目创建

开发flutter应用，我们通常使用的工具是Android Studio。创建一个flutter项目，可以通过Android Studio来创建，也可以通过命令行来创建。

1.通过Android Studio来创建

• 启动Android Studio，找到Create New Flutter Project；
• 然后会来到一个让选择项目类型的页面Flutter Application、Flutter Plugin、Flutter Package、Flutter Module；选择Flutter Application；
• 输入Project name、Flutter SDK path、Project location信息，点击下一步，然后等待一小会即可创建成功。

注意事项：
1.Flutter Application-全新的App，包含标准的Dart与Native层；Flutter Module-混编到已有的Android/iOS工程内；Flutter Plugin-平台插件，包含Dart与Native层的实现；Flutter Package-纯Dart工程，仅有Dart层实现。
2.需要注意的是Project name只能只用小写字母或者下划线；

2.通过命令行创建

/*创建Flutter Application*/
flutter create  appname 
/*创建Flutter Module*/
flutter create -t module appname_module
/*创建Flutter Plugin*/
flutter create --template=plugin appname_plugin
/*创建Flutter Package*/
flutter create --template=package appname_package

在创建项目的过程中可以指定Android和iOS的平台开发语言:-i objc或-i swift可指定iOS平台是OC还是Swift;-a java或-a kotlin可指定Android是Java还是Kotlin。更多选项可以通过flutter create --help来查看。

创建好的项目，包括android,ios,lib等目录，main函数和我们开发写的Dart代码都在lib目录中。

2、基础语法

flutter项目使用的dart语言，其基础语法与Swift和Kotlin非常接近。
接下来我们简单列举一个例子，定义一个Worker类

class Worker {
  //定义静态变量：格式：类型 变量名 = 初始值
  //在外部通过 = Worker.key; Worker.key = "22"进行读写 （类似于swift的 static var key = "worker"）
  //在内不通过 = key;key = ""进行读写
  //static String _i = "111";如果带下划线将不能被外部访问
  static String key = 'Worker';

  //定义成员变量：格式：类型 变量名 = 初始值
  //如果成员变量不给初始值，那么需要指定该成员变量是空安全（null-safety,跟swift的可选类型类似）
  //如果成员边量带下划线，表示该成员变量尽在该文件内可以访问。（跟swift的fileprivate类似）
  //const不可变的常量，：在编译期确定变量测值，不可用运行态的内容来赋值，如时间戳/随机数；赋值后不可修改
  //final最终不可变的常量：赋值一次后不可以改变，可以赋值为时间戳和随机数等。
  String name = '';
  String _nickname = '';
  int? height;////未初始化的变量指向null
  int? age;//未初始化的变量指向null

  //构造函数
  //同名的参数（可以简写成如下方式，私有成员变量不可以）
  Worker(this.name,this.height, String _nickname){
    this._nickname = _nickname;
  }

  //函数:返回值 函数名 (参数列表)
  //带前置下划线的函数不能被外部访问，与带下划线的的成员变量相同
  int printAll() {
    print(
        'printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
    return 8;
  }

  int _printAll(){
    print('_printAll:key=$key, name=$name, _nickname=$_nickname, height=$height, age=$age');
    return 9;
  }
}

调用部分如下：

void main() {
  Worker.key = "222";
  print(Worker.key);
  Worker worker = Worker("name", 19, "nickname");
  worker.printAll();
}

3.基础结构

flutter项目从main启动后，调用runApp()，即可将UI载入：

void main() {
  runApp(TextWidget());
}

//在widget中我们重载Widget build(BuildContext context)函数，返回创建的widget
class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(44),
      color: Colors.yellow,
      child: Text(
          "Hello Flutter",
          textAlign:TextAlign.center,/*文本居中显示*/
          textDirection:TextDirection.ltr,/*文字阅读顺序*/
          style: TextStyle(
          color: Colors.red,/*文字颜色*/
          fontSize: 40/*文字大小*/
        )
      )
    );
  }
}

flutter中MaterialApp代表Material Design风格的应用，内部包含该风格应用所需要的基本控件, 其home属性应用的根节点。Scaffold名为脚手架，为应用提供了导航栏、Tab等:

• appBar:导航栏NavigationBar位居页面最顶部
• bottomNavigationBar：标签栏Tabbar，位居页面最底部
• body:除appBar/bottomNavigationBar以外的屏幕中间区域
  接下来，我们把这些基础组建给弄出来看看:

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner:false,
        home: Scaffold(
            appBar: AppBar(
                title: Text('Explorer App')
            ),
            body: TextWidget()
        )
    );
  }
}

这样我们后面做基础组建的学习只需要修改Scaffold.body即可。

4.布局控件

在原生开发中我们常用frame、AutoLayout布局，在h5项目中我们常用flex布局。在flutter开发中，Dart为我们提供了类似flex布局Row，Column， Stack等。

4.1 Row、Column表示一组平面上排列的元素

其中Row主轴mainAxisAlignment是从屏幕左侧到右侧，交叉轴从屏幕顶部到下方；Column主轴crossAxisAlignment从屏幕的上方到下方，交叉轴是从屏幕的左侧到右侧。

• mainAxisAlignment变量-主轴

start-元素居左/居上显示，元素之间间距为0，多余的空间居右/下；
center-元素居中显示，元素间艰巨为0，多余的空间一分为二居左右/上下；
end-元素居右/下显示，元素之间间距为0，多余的空间居左/上；
spaceBetween-元素分开显示，多余的空间分配到元素与元素之间；
spaceAround-整体空间按照元素的个数均分，多余的空间显示在元素的左右/上下两侧；
spaceEvenly-将多余的空间均分于左+元素之间+右/上+元素之间+下；

• CrossAxisAlignment变量-交叉轴：

start:元素居上/左显示；
center:元素居上下居中/左右居中；
end:元素居下/右显示
stretch：元素拉伸
baseline：用于Text基线对齐

Row布局的主轴为x+方向，交叉轴为y+方向；Column的主轴为y+方向，交叉轴为x+方向。搞清楚这两个最常用的布局，开发中如鱼得水。

4.2.Stack一组垂直于屏幕排列的元素，

整组处于父容器中的位置通过alignment来确定，alignment接受一个AlignmentDirectional类型的对象，该对象两个属性start，y分别表示处在x轴，y轴上的位置。内部定义父视图x轴方向起点为-1，中点为0，右侧为1，父视图y轴方向起点为-1，中点为0，右侧为1。该类也有一些常用的位置定义,比如

/// The center point, both horizontally and vertically.
  ///
  /// Consider using [Alignment.center] instead, as it does not need to
  /// be [resolve]d to be used.
  static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);

该布局用起来相对简单: