Flutter 基础控件二

1.引言

上一节学习了center，expanded，container, flex ,row 等布局控件。链接：https://www.jianshu.com/p/a7065ce86162

2.正题

• Image 控件
  image 支持以下图像格式: jpeg、png、gif、动画 gif、webp、动画 webp、bmp 和 wbmp。

  属性介绍:

  • Alignment
    alignment 是该image 相对于父布局的位置，而不是内部图像相对于image的 边。

  • fit
    描述图片缩放方式，以铺满image占据的宽高。

    • BoxFit.cover 类似于centerCrop
    • BoxFit.fill 类似于 fitxy
    • BoxFit.fitHeight 让图片高度完全显示
    • BoxFit.fitWidth 让图片宽度完全显示

  • height 和 widt

2.1 加载网络图片

class ImageTest extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    var c=new Container(
      child:Image.network("http://seopic.699pic.com/photo/50035/0520.jpg_wh1200.jpg",width: 200,height: 200,alignment: Alignment.topCenter,semanticLabel: "hello",),
      color: Colors.green,
    );
    return c;
  }
}

image.png

2.2加载本地图片

1.先在pubspec.yaml 中注册图片：- images/hello.png

2. Image.asset方法设置了images/hello.png 就可以使用了。

class ImageTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var c = new Container(
      child: new Column(
        children: <Widget>[

          new Text("网络图片"),
          Image.network("https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=571122a7b07eca8016053ee5a1229712/8d5494eef01f3a29c8f5514a9925bc315c607c71.jpg"),

          new Text("本地图片"),
          Image.asset("images/hello.png"),

        ],

      ),
    );
    return c;
  }
}

image.png

ps: Text控件在gbk的字符集下使用中文，会提示依赖无法连接。切换到utf8 就可以了

---

RaisedButton 控件

///注:Flutter SDK源码
const RaisedButton({
    Key key,
    //点击回调
    @required this.onPressed,
    //水波纹高亮变化回调
    this.onHighlightChanged,
    //定义按钮的基本颜色，以及按钮的最小大小、内部填充和形状的默认值
    this.textTheme,
    //按钮文字颜色
    this.textColor,
    //按钮禁用的时候文字的颜色
    this.disabledTextColor,
    //按钮颜色
    this.color,
    //按钮被禁用的时候显示的颜色
    this.disabledColor,
    //下面这两个看我的 “Flutter之水波纹” 这篇文章
    this.highlightColor, //按下去显示的颜色
    this.splashColor,
    //按钮主题高亮
    this.colorBrightness,
    //按钮下面阴影
    this.elevation: 2.0,
    this.highlightElevation: 8.0,
    this.disabledElevation: 0.0,
    this.padding,
    //shapeborder看我的“Flutter之Material” 这篇文章
    this.shape,
    this.animationDuration: kThemeChangeDuration,
    this.child,
  }) ;

① FlatButton:
没有阴影，就是一个平滑的按钮，常用的比如一些界面上面的文字区域点击可以使用它，还有水波纹效果。
dialog有确定和取消两个选项，5.0以上的手机，触摸或者点击这两个选项是有水波纹一样的效果，我们可以用FlatButton。
toolbar上面显示的文本触摸或者点击也有这样的效果，我们也都可以通过FlatButton实现。
② RawMaterialButton:
RaisedButton 和 FlatButton 基于当前Theme和ButtonThem配置一个RawMaterialButton。
Flatbutton最普通，RaisedButton还能配置ButtonTheme，是Flatbutton的一个升级版本，RawMaterialButton是他们两个的升级版本。

DropdownButton 控件

///注:Flutter SDK中源码
DropdownButton({
    Key key,
    //下拉菜单显示的条目集合信息
    @required this.items,
    //下拉菜单选择完之后,呈现给用的值
    this.value,
    //提示文字,第一次不指定默认的值即value值为null,我们的hint就起到了作用
    //一般hint展示：请选择一个条目,或者我们第一次把hint展示位下拉菜单条目的第一个值
    this.hint,
    //下拉菜单item点击之后的回调
    @required this.onChanged,
    this.elevation: 8,
    //TextStyle
    this.style,
    //下拉菜单icon按钮大小
    this.iconSize: 24.0,
    this.isDense: false,
  })

例子:

import 'package:flutter/material.dart';

class ImageTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new DropDownButton();
  }
}

class DropDownButton extends State<ImageTest> {
  var datas = List<DropdownMenuItem<String>>();
  var defalut = "男";
  @override
  Widget build(BuildContext context) {
    //datas.clear();
    datas.add(new DropdownMenuItem(
      child: new Text("男"),
      value: "男",
    ));
    datas.add(new DropdownMenuItem(
      child: new Text("女"),
      value: "女",
    ));
    print("build+++");

    var d = new DropdownButton(
      items: datas,
      onChanged: (String s) {
        print(s);
        setState(() {
          defalut=s;
        });
      },
      value: defalut,
    );
    return d;
  }
}

注意：假如datas数据源中的DropdownMenuItem的value有重复的话，就会报错，错误提示为:value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1