Flutter-基础组件二

1.基本组件

1）Text 文本组件

Text('首页',style:TextStyle(
      //颜色
      color:Colors.orange,
      //字体大小
      fontSize:20,
      //字体加粗
      fontWeight: FontWeight.bold,
    ))


TextStyle 属性设置：
TextStyle({
    this.inherit = true,
    this.color,//文本样式
    this.fontSize,//字体大小
    this.fontWeight,//绘制文本时的字体粗细
    this.fontStyle,//字体变体
    this.letterSpacing,//水平字母之间的空间间隔(逻辑像素为单位),可以负值
    this.wordSpacing,//单词之间添加的空间间隔(逻辑像素为单位),可以负值
    this.textBaseline,//对齐文本的水平线
    this.height,//文本行与行的高度,作为字体代销的倍数
    this.locale,//用于选择区域定字形的语言环境
    this.foreground,//文本的前景色，不能与color共同设置
    this.background,//文本背景色
    this.shadows,//Flutter Decoration背景设定(边框，圆角，阴影,渐变等)
    this.decoration,//绘制文本装饰，添加上下划线，删除线
    this.decorationColor,//文本装饰的颜色
    this.decorationStyle,//文本装饰的样式，控制画虚线，点，波浪线
    this.debugLabel,
    String fontFamily,//使用字体的名称
    String package,
  })

2）RichText 富文本

常用属性：

• text：需要设置TextSpan类型，而且textSpan必须设置style,不然不显示。
• textAlign：文本开始位置。
• textDirection：文本方向。
• maxLines：最大行数。
• overflow：文本超出部分显示样式。

RichText(
 text:TextSpan(
     text: '你是猪吗',
     style: TextStyle(color: Colors.black, fontSize: 18.0),
     recognizer: TapGestureRecognizer()..onTap=(){
       print('你点击了\'你是猪吗\'');
     },
     children: [
       TextSpan(text: '滚',style: TextStyle(color: Colors.orange, fontSize: 18.0)),
       TextSpan(text: '你才是',style: TextStyle(color: Colors.blue, fontSize: 18.0)),
       TextSpan(text: '猪',style: TextStyle(color: Colors.green, fontSize: 18.0))
     ]
 )
)

TextSpan 属性：

TextSpan({
    this.text, //文本
    this.children, // TextSpan数组
    TextStyle style,// 文本样式
    this.recognizer,// 设置识别手势
    this.semanticsLabel,// 文本的语义
  })

3）textfield 文本输入框

常用属性：

• autocorrect：是否启用自动更正。
• autofocus：是否是自动获取焦点。
• controller：设置一个TextEditingController ，控制正在编辑的文本。
• decoration：可以设置文本框的外观，以及hitText相当于placeHolder。
• enabled：是否禁用。
• focusNode：是否具有键盘焦点。
• inputFormatters：可选的，输入验证和格式化。
• keyboardType：用于编辑文本的键盘类型。
• maxLength：文本最大的字符串长度。
• maxLengthEnforced：如果为true，则防止字段超过 maxLength字符。
• maxLines：文本最大行数，默认为 1。多行时应该设置为 > 1。
• obscureText：是否是隐藏文本（密码形式）。
• onChanged：当 value 改变时触发。
• onSubmitted：当用户点击键盘的提交时触发。
• style：文本样式，颜色，字体等。
• textAlign：设置文本对齐方式

final editController = TextEditingController();

TextField(
    controller: editController,
    keyboardType: TextInputType.phone,
    maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
    maxLines: 1,//最大行数
    autocorrect: true,//是否自动更正
    autofocus: true,//是否自动对焦
    //      obscureText: true,//是否是密码
    textAlign: TextAlign.left,//文本对齐方式
    style: TextStyle(fontSize: 15.0, color: Colors.blue,height: 30),//输入文本的样式
    inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
    onChanged:(value){
      print('输入内容 = $value');
    },
    onSubmitted:(value){
      print('提交的内容 = $value');
    }
),

4）Button 按钮

• RaisedButton："漂浮"按钮，它默认带有阴影和灰色背景。
• FlatButton：扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。
• OutlineButton：默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。
• IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。

RaisedButton(
  child: Text("normal"),
  onPressed: () {
    print('Raise按钮被点击了');
  },
);
FlatButton(
  child: Text("normal"),
  onPressed: () {
    print('Flat按钮被点击了');
  },
)

OutlineButton(
  child: Text("normal"),
  onPressed: () {
    print('Outline按钮被点击了');
  },
)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('icon按钮被点击了'); 
  },
)

5）Image 图片

先在pubspec.yaml中配置图片路径,新建一个images文件夹与lib同级，用来存放图片资源。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
   - images/    // 默认1.0x图片，声明images下的所有图片但不包含子文夹下的图片
   - images/home/wish.png // 声明具体的某张图片，可以不需要配置这么具体
   - images/home/       // 声明home文件下的所有图片
   - images/2.0x/       // 声明2倍图中的所有图片
   - images/3.0x/
   - images/xianbao.png  // 声明1倍图中没有但2倍3倍图中有的图片

• 适配2x，3x分辨率图片

在images文件夹下创建2.0x和3.0x文件夹存放2x，3x图片。flutter中会首先根据系统的devicePixelRatio，来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

images/ 默认存放的是1.0x的图片，若1倍图中没有要声明的图片，想要直接自适应2倍图和3倍图，要单独进行声明，但不需要带2.0x,和3.0x,系统会自动按分辨率从低到的顺序去选择。

1.0x、2.0x、3.0x 文件名保持一致。

• 路径配置

不需要配置完整路径，配置到图片所在文件夹即可，不然几百张图片每张图片配置一个路径不是要累死。

• 创建方式

// 第一种方式创建Image
Image.asset('images/juren.jpeg',width: 200,height: 200,),
Image.asset('images/xianbao.png',width: 50,height: 50,),
// 加载网络图片
Image.network('http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg',width: 200,height: 300,),
// 第二种方式创建Image
Image(image: AssetImage('images/home/wish.png'),width: 50,height: 50,)

属性fit:

• BoxFit.fil：完全填充，宽高比可能会变。
• BoxFit.contain：等比拉伸，直到一边填充满。
• BoxFit.cover：等比拉伸，直到两边都填充满，此时一边可能超出范围。
• BoxFit.fitWidth：等比拉伸，宽填充满。
• BoxFit.fitHeight：等比拉伸，高填充满。
• BoxFit.none：不拉伸，超出范围截取。
• BoxFit.scaleDown：只缩小，等比。

6）CircleAvatar

源码：

 const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
   })

示例：

//圆行图片
Align(
  child: CircleAvatar(
    backgroundImage: NetworkImage(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
    backgroundColor: Color(0xffff0000),
    radius: 40.0,
  ),
)


Align(
  child: ClipOval(
    child: SizedBox(
      width: 80.0,
      height: 80.0,
      child: Image.network(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
        fit: BoxFit.fill,),
    ),
  ),
),
Align(
    child: Container(
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
          ),
        ),
      ),
    )
),

注意：

• 发现不添加Align时，CircleAvatar并没有显示为圆形，
  只有设置backgroundColor或者backgroundImage时才显示为了圆形。

• radius和minRadius与maxRadius不能同时使用。

• ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形。

• BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit:BoxFit.fill才能显示为圆形。

7）Icon 字体图库

Flutter 中，也可以使用iconfont。iconfont和图片相比它的优势：

• 体积更小，可以减少安装包大小。
• iconfont 都是矢量图标，放大不会影响其清晰度。
• 可以应用文本样式，可以像文本一样改变字体图标的颜色、大小对齐等。
• 可以通过 TextSpan 和文本混用。

 const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //颜色
    this.semanticLabel,  //语义标签
    this.textDirection,  //icon文字方向
  }) 


final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

8）Checkbox 复选框

常用属性：

• value：复选框的值bool类型。
• activeColor：选中时的复选框的颜色。
• onChanged：复选框的响应事件。

Checkbox(
  value: _checkValue,
  activeColor: Colors.red,
  onChanged: (value){
    setState(() {
      _checkValue = value;
    });
    print("checkBox value changed");
  },),

9）Switch 开关

常用属性：

• activeColor：激活时开关的颜色。
• activeThumbImage：原点支持图片设置，激活时的效果。
• activeTrackColor：激活时横条的颜色。
• inactiveThumbColor：非激活时原点的颜色。
• inactiveThumbImage：非激活原点的图片效果。
• inactiveTrackColor：非激活时横条的颜色。
• onChanged：值改变时触发。
• value：切换值时的响应事件。

Switch(
  value: _switchValue,
  activeColor:Colors.blue ,
  onChanged: (value){
    setState(() {
      _switchValue = value;
    });
})

2.列表组件和网格组件

1）ListView

常用的构造方式：

• ListView()
• ListView.builder
• ListView.separated
• ListView.custom

常用属性：

• scrollDirection：滚动方向。
• controller：滚动控制，主要是控制滚动位置和监听滚动事件。
• reverse： 显示方式，默认正序显示。
• primary：false时如果内容不足，则用户无法滚动，而如果为true，它们总是可以尝试滚动。相当于iOS的bounce弹性设置。
• padding：内边距。
• physics:滚动底部时弹簧效果设置，不同平台可以设置不同效果，也可以统一。
• shrinkWrap：是否根据子widget的总长度来设置GridView的长度。
• itemExtent：该参数如果不为null，则会强制children的高度为itemExtent的值，横向为宽度，纵向为高度。
• itemBuilder：构造的item。
• itemCount：item数量，一般根据模型数量确定，如果为null，则视为无限列表。
• separatorBuilder：自定义分割线的回调方法。

示例:

class ListViewWidget extends StatelessWidget{

  final List listData=[
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/1.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/2.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/3.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/4.png"
    },{
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/5.png"
    }
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: listData.length,
      itemExtent: 120,
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

}




/*

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
      itemCount: listData.length,
      separatorBuilder: (BuildContext context,int index){
        return Divider(height: 1.0, color: Colors.blue);
      },
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

**/

2）GridView

常用属性：

• scrollDirection：滚动方向horizontal（水平）或vertical（垂直）。
• reverse：显示方式，默认正序显示。
• controller：用来控制滚动位置及监听滚动事件。
• gridDelegate：控制子Widget如何进行布局。
• children：子控件。

gridDelegate 用来控制子Widget如何进行布局,它有如下两个实现类：

• SliverGridDelegateWithMaxCrossAxisExtent

const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent, //子控件的最大宽度，实际宽度是根据交叉轴的值进行平分，也就是说最大宽度并不一定是实际宽度，很有可能子控件的实际宽度要小于设置的最大宽度
    this.mainAxisSpacing = 0.0, //主轴之间的间距
    this.crossAxisSpacing = 0.0,//交叉轴之间的间距
    this.childAspectRatio = 1.0,//子控件的宽高比
  }

子控件的个数实际上就是交叉轴的最大宽度除以我们设置的最大值得出的值，如果该值为整数，那个该值就是子控件的个数，如果不是整数，那么就舍掉小数点后面的值加上一后就是子控件的个数。

• SliverGridDelegateWithFixedCrossAxisCount

const SliverGridDelegateWithFixedCrossAxisCount({
    @required this.crossAxisCount,  //交叉轴上子控件的个数
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  }) 

示例：

class GridViewWidget extends StatelessWidget{


  @override
  Widget build(BuildContext context) {

    return GridView.builder(gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
//        maxCrossAxisExtent:100,
        crossAxisCount:3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10

    ),
      itemCount:20,
      itemBuilder:(BuildContext context, int index){
      return Container(
        color: Colors.orange,
        child: Center(
          child: Text('item $index',style: TextStyle(backgroundColor:Colors.blue,color: Colors.white),),
        ),
      );
    });
  }

}