Flutter—语法解析

Dart语言

（Dart面向对象需要着重研究一下）

Widget：小部件，相当于Xcode中的控件和UIView，相当于RN中的组建

所有的部件分为两大类：

StateflulWidget ：有状态，自身创建的时候有状态类对其状态进行保存，如果想对有状态部件进行修改，就需要先销毁再重新创建，

StatelessWidget : 无状态

一个Widget就是一个类

MaterialApp 相当于rootVC

Scaffold  相当于VC

Container 相当于UIView

appBar:AppBar  相当于Nagi，顶部导航栏相关

PopupMenuButton 导航栏上的可点击按钮，如“+”

 

gradient：LinearGradient(   线性渐变

gradient：RadialGradient(   放射状渐变

gradient：SweepGradient(   扇形渐变

Positioned  悬浮控件，遮罩层

Column   布局相当于是每一个cell，纵向布局。

Row       横向布局。

Stack     层级排列布局，处理比较复杂的界面布局

https://www.jianshu.com/p/387d730cbe92

Expanded  来平分布局占用比例。可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间

GridView

GridTile : 是一个Flutter 提供的组件的，用来在GridView中给Item 增加更丰富的展示用的。布局方式就是Stack，在源代码中就到Positioned 来进行位置控制，主要提供三个Widget的展示分别为child、header、footer

Align ：一般在对齐场景下使用，例如需要右对齐或者底部对齐之类的。它能够实现的功能，Container都能实现。

padding ：内边距、偏移量、间距

alignment  : 外边距、对其方式、偏移量 （常用于文本）

margin: 偏移量

SizedBox(height: 10,) ,  设置图片和文字的间距

padding: EdgeInsets.only( //内边距

mainAxisAlignment: MainAxisAlignment.spaceBetween, //让其子类向两边分离，中间空着 /官方解释：把空闲的空间均匀地放在两个孩子之间

mainAxisAlignment: MainAxisAlignment.center, //让其子类向中间靠拢，其余位置空着 /官方解释：让孩子们尽可能靠近主轴的中间位置。

mainAxisAlignment: MainAxisAlignment.start, //让其子类位于最左，或者是最顶部  /配合TextDirection或VerticalDirection使用

mainAxisAlignment: MainAxisAlignment.end, //让其子类位于最右，或者是最底部  /配合TextDirection或VerticalDirection使用

mainAxisAlignment: MainAxisAlignment.spaceAround, //将空闲空间均匀地放在子节点之间，以及该空间的一半在第一个和最后一个子节点之前和之后。

mainAxisAlignment: MainAxisAlignment.spaceEvenly, //将空闲空间均匀地放在子节点之间以及第一个和最后一个子节点之前和之后。

Spacer ：

decoration:  背景装饰，修饰，可以设置边框、背景色、背景图片、圆角等属性

decoration: BoxDecoration  BoxDecoration 盒子装饰：颜色、图片、圆角..

leading: Container(
         44,
        height: 44,
        //  decoration: 装饰
        // BoxDecoration 盒子装饰：颜色、图片、圆角..
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(6.0),
            image:
                DecorationImage(image: NetworkImage(_datas[index].imageUrl))),
      ),

overflow: TextOverflow.ellipsis,   //超出部分以...形式展示

child: Text(
          _datas[index].message,
          //超出部分以...形式展示
          overflow: TextOverflow.ellipsis,
        ),

ListView :列表，类似于cell

itemCount :  列表数量

itemBuilder : 开始创建列表cell

body: Container(
        child: _datas.length == 0
            ? Center(
                child: Text("Loading..."),
              )
            : ListView.builder(   //ListView 列表
                itemCount: _datas.length+1,   //itemCount 列表个数
                itemBuilder: _buildCellForRow, //创建列表：搜索框 + 通讯录列表
              ),
      ),

GestureDetector  //添加手势

onTop ：单击

onTopDown :  按下去

onTopCancel : 松开

快捷方式：

Command + - =  局部折叠代码
Command + + =  局部展开代码
Command + shift + - =  全部折叠
Command + shift + + =  全部展开

终端中输入$ open -a Simulator  直接启动Xcode模拟器
Command + { =  返回上一步操作
Command + shift + O = 
Stle =  快速输出StatelessWidget结构体
选中报错位置+Option +回车键 = 弹出缺失头文件，再单独按回车键 =  默认导入第一个头文件
选中括号 + Command + 回车键 = 自动换行布局代码

Text相关属性设置：

import 'package:flutter/material.dart';

//Text 相关属性
class TextDemo extends StatelessWidget {

  //设置文字的属性
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
//    color: Colors.orange
  );

  //给这些文字插入一些变量
  final String _title = 'Flutter特训';  //标题 ->《$_title》
  final String _telector = 'Nusen';  //讲师

  //$ 是拼接符号
  //如果是设置副标题和后接内容：1.《${_title}真棒》  2.《$_title 真棒》
  @override
  Widget build(BuildContext context) {
    return Text(
      '《${_title}真棒》-- $_telector Flutter中文网是中国最大的Flutter开发者交流学习平台,致力于打造Flutter开发中文社区。在这里能轻松找到代码实例、项目案例、并有专人提供最新文档翻译。',
          textAlign: TextAlign.left,
      style: _textStyle,
      maxLines: 3,  //设置最大行数
      overflow: TextOverflow.ellipsis,//超出部分以...形式展示
    );
  }
}

效果图：

RichText富文本相关属性设置：

//富文本 相关属性
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '《Flutter特训班》',
        style: TextStyle(
          fontSize: 30,
          color: Colors.black
        ),
        children: <TextSpan>[
          TextSpan(
          text: 'Nusen',
        style: TextStyle(
          fontSize: 16,
          color:Colors.blue

        )

      ),
          TextSpan(
            text: 'Ring',
            style: TextStyle(
              fontSize: 17,
              color: Colors.grey
            )
          )
          ],
      ),

    );
  }
}

效果图：