Flutter 常用widget 介绍

开始之前先推荐两个技能 ：

第一个是很好用 android studio 插件Translation,英语不好的小伙伴可以加快学习的速度。上个图：

不会装的小伙伴自己去百度找教程，我就不多说了。

第二个，我只会注释widget属性的作用，参数的值得小伙伴自己去看源码，具体方法是按住ctrl键，移到相应的属性就会显示出来(如下图)，点击相应的属性就进去了。

由于本文篇幅比较长，故在这里写上已经更新的widget列表，win使用ctrl+F ,mac 使用command+F 进行定位吧

1. Flutter 基本控件之Text widgets
2. Flutter 基本控件之PageView widgets
3. Flutter 基本控件之Image widgets
4. Flutter 基本控件之GestureDetector widgets

Flutter 基本控件之Text widgets

Text Widgets继承自StatelessWidget， 类似于android中的Textview，Text控件的构造方法如下：

/// If the [style] argument is null, the text will use the style from the closest enclosing [DefaultTextStyle].
上面译文：如果[style]参数为null，则文本将使用最接近的[DefaultTextStyle]中的样式。
const Text(this.data, {//文本内容
  Key key,
  this.style,//文本样式
  this.strutStyle,//使用的支柱风格
  this.textAlign,//对齐方式
  this.textDirection,//文本方向 
  this.locale,
  this.softWrap,//是否自动换行
  this.overflow,//超出屏幕显示方式
  this.textScaleFactor,//每个逻辑像素的字体像素数
  this.maxLines,//最大显示的行数
  this.semanticsLabel,//文本的另一个语义标签
}) : assert(data != null),
     textSpan = null,
     super(key: key);

/// Creates a text widget with a [TextSpan].
//可以显示不同样式textSpan的段落。
const Text.rich(this.textSpan, {
  Key key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaleFactor,
  this.maxLines,
  this.semanticsLabel,
}) : assert(textSpan != null),
     data = null,
     super(key: key);

TextSpan的构造方法
需配合Text.rich一起使用
const TextSpan({
  this.style,
  this.text,
  this.children,
  this.recognizer,
});


TextStyle的构造方法如下：
const TextStyle({
  this.inherit = true,
  this.color,//字体颜色
  this.fontSize,//字体大小
  this.fontWeight,//字体粗细
  this.fontStyle,//字体风格，正常或斜体
  this.letterSpacing,//字间距，中文的字间距，英文的字母间距
  this.wordSpacing,//词间距，英文的词，中文无效
  this.textBaseline,//用于对齐文本的水平线
  this.height, //此文本的行高（值为字体大小的倍数，如height:2,fontSize:18,那么行高为36）
  this.locale,//用于选择区域特定字形的区域设置
  this.foreground,//前景色
  this.background,//背景色
  this.shadows,//将在文本下方绘制的阴影
  this.decoration,//在文本附近绘制的装饰（例如：下划线）
  this.decorationColor,//装饰的颜色
  this.decorationStyle,//装饰的样式
  this.debugLabel,
  String fontFamily,//字体
  List<String> fontFamilyFallback,
  String package,
}) 

//给文本设置点击事件示例：
Text.rich(new TextSpan(
    text: "设置点击事件-我可以点击",
    recognizer: new TapGestureRecognizer()
      ..onTap = () {
        print("点击了");
      })),

Text控件的相关博客：

Flutter入门 — Text , Flutter Text 参数详解

Flutter 基本控件之PageView widgets

PageView Widgets继承自StatefulWidget， 类似于android中的Viewpager，iOS 的UIPageController, 页面视图的每个子项都被强制与视图大小相同， PageView控件的构造方法如下：

构造方法一、
PageView({
  Key key,
  this.scrollDirection = Axis.horizontal,
  this.reverse = false,
  PageController controller,
  this.physics,
  this.pageSnapping = true,
  this.onPageChanged,
  List<Widget> children = const <Widget>[],
  this.dragStartBehavior = DragStartBehavior.down,
}) 



构造方法二：创建可滚动列表，使用按需创建的窗口小部件逐页工作。
PageView.builder({
  Key key,//标识符
  this.scrollDirection = Axis.horizontal,//滚动方向 (水平或上下)
  this.reverse = false,//页面视图是否在阅读方向上滚动，（左右或右左）
  PageController controller,//页面控制器
  this.physics,//页面视图应如何响应用户输入
  this.pageSnapping = true,//页面捕捉，true时一次滑动一个页面，false一次可滑动多个页面
  this.onPageChanged,//每当页面发生更改时的回调，返回更改后的索引
  @required IndexedWidgetBuilder itemBuilder,//返回指定索引的widget
  int itemCount, //最大页面数
  this.dragStartBehavior = DragStartBehavior.down,//设置初始偏移量
}) :

itemBuilder传参示例：
itemBuilder: (BuildContext context,int index){
  return pages[_current];//pages为List<Widget>
},
physics传参示例：
physics: new NeverScrollableScrollPhysics(),//禁止滑动

构造方法三：创建一个可滚动列表，该列表使用自定义子模型逐页工作。
PageView.custom({
  Key key,
  this.scrollDirection = Axis.horizontal,
  this.reverse = false,
  PageController controller,
  this.physics,
  this.pageSnapping = true,
  this.onPageChanged,
  @required this.childrenDelegate, //委托
  this.dragStartBehavior = DragStartBehavior.down,//设置初始偏移量
})



PageView 相关文章：
PageView 官方地址 , PageView 禁止滑动

Flutter 基本控件之Image widgets

Image 继承自StatefulWidget，图片显示Widget, 和Android ImageView相似，但是从实际使用的方法上看，与常用的图片加载库，如Picasso，Glide等相似，支持本地图片，资源图片，网络图片等加载方式。

待完善。。

Image 相关文章：

Flutter Widgets: Image ，

Flutter 基本控件之GestureDetector widgets

GestureDetector相关文章：

Flutter之GestureDetector组件 ，Flutter如何使用入门学习(3)Flutter中的点击、拖动和其它手势

下个控件待更新。。。。。