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
- 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
网友评论