widgets
1、widgets文本和字体。 在树形结构中可以继承父节点的样式
eg:(1)文本后面直接跟样式
Text(
"HELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODYHELLO BODY",
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textScaleFactor: 1.4,
),
(2)先定义样式。在直接调用
const style=TextStyle(
// color: Colors.yellow,
// 0x固定的 ff是不透明度 最后六位是颜色
color: const Color(0xffff0000),
fontSize: 20,
fontFamily: "yahei",
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
);
Text("样式",style: style),
(3) span标签的用法 text标签独占一行
Text.rich(TextSpan(
children: [
TextSpan(text: "主页:",
style: TextStyle(
fontSize: 30
)),
TextSpan(text: "https://www.baidu.com",
style: TextStyle(
color: Colors.blue
)),
],
style: TextStyle(
fontSize: 40
)
))
2、widgets按钮
//有颜色 悬浮按钮 带阴影
RaisedButton(
child: Text("RaisedButton"),
onPressed: ()=>{
print("RaisedButton on")
},
),
//无颜色 点击时有颜色
FlatButton(
child: Text("FlatButton"),
onPressed: ()=>{
print("FlatButton on")
},
),
//外面有边框
OutlineButton(
child: Text("OutlineButton"),
onPressed: ()=>{
print("OutlineButton on")
},
),
//自定义
FlatButton(
child: Text("FlatButton自定义"),
color: Colors.blue,
textColor: Colors.red,
highlightColor: Colors.yellow,
//圆角
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: ()=>{
print("FlatButton on")
},
),
// IconButton：图标按钮,继承自StatelessWidget
3、图片和图标
图片
// 1、加载本地图片 需要在pubspec.yaml里面的assets进行注册
// fill填满盒子 图片大小和盒子一样时使用
// cover自动计算 宽高看谁能填满 超出部分截断
// fitWidth先填满宽
// fitHeight先填满高
// none图片自由发挥
Image.asset("static/imgs/1.png",
fit: BoxFit.none,
),
// 2、加载网络图片
Image.network("https://www.baidu.com/img/bd_logo1.png?qua=high",
//颜色混合
color: Colors.pink,
// BlendMode.difference混合模式
// BlendMode.darken变深一点
colorBlendMode: BlendMode.darken,
width: 150,
//
),
图标
//1、引用字体文件 自带的
Icon(Icons.access_alarm),
// 2、引用字体文件 自定义的图标
//引入第三方的字体库
// 1、下载第三方的字体库
// 2、把ttf文件copy到项目工程文件中
// 3、在pubspec.yaml里面的fonts自定义一个字体 family随便写 assets路径是本地ddf的路径
// 4、自定义一个dart文件 创建一个自己的class都是IconData类型
Icon(MyIcon.jingdon,
color: Colors.yellow,
),
Icon(MyIcon.xiaomi),
Icon(MyIcon.xiecheng),
],
MyIcon.dart
import 'package:flutter/material.dart';
class MyIcon{
static const IconData xiaomi=const IconData(
// 0x是固定的 后四位取下载下来资源包的html中的后四位
0xe661,
fontFamily: 'myCoodIcon',
//是否跟文字方向一样
matchTextDirection: true
);
static const IconData xiecheng=const IconData(
0xe62b,
// pubspec.yaml自定义的文字名字
fontFamily: 'myCoodIcon',
//是否跟文字方向一样
matchTextDirection: true
);
static const IconData jingdon=const IconData(
0xe612,
fontFamily: 'myCoodIcon',
//是否跟文字方向一样
matchTextDirection: true
);
}
4、下拉框(DropdownButton)
有自己的值 就是有自己的状态 用StatefulWidget
StatelessWidget不保存状态 只负责描绘
new DropdownButton
class MyDropDownButton extends StatefulWidget {
@override
State createState() {
//TODO: implement createState
//把实现类return出来
return _MyDropDownButton();
}
}
//_MyDropDownButton是MyDropDownButton的实现
class _MyDropDownButton extends State {
List getCityList(){
List cityList=new List();
cityList.add(DropdownMenuItem(child: new Text("上海"),value: "shanghai",));
cityList.add(DropdownMenuItem(child: new Text("北京"),value: "beijing",));
cityList.add(DropdownMenuItem(child: new Text("广州"),value: "guangzhou",));
cityList.add(DropdownMenuItem(child: new Text("深圳"),value: "shenzhen",));
return cityList;
}
var selectedCity;
@override
Widget build(BuildContext context) {
//TODO: implement build
return new Column(
children: [
new DropdownButton(
//下拉框的内容
items: getCityList(),
//提示
hint: new Text("请选择城市"),
value: selectedCity,
onChanged: (val){
print(val);
//把值存起来并且进行页面刷新 重绘
setState(() {
this.selectedCity=val;
});
}
)
],
);
}
}
5、单选框和多选框
class SwitchAndRedioComponent extends StatefulWidget{
@override
State createState() {
//TODO: implement createState
return _SwitchAndRedioComponent();
}
}
class _SwitchAndRedioComponent extends State{
var _switchVal=true;
var _CheckboxVal=true;
@override
Widget build(BuildContext context) {
//TODO: implement build
return new Column(
children: [
Switch(value: _switchVal, onChanged: (val){
print(val);
setState(() {
this._switchVal=val;
});
}),
Checkbox(value: _CheckboxVal,
onChanged:(val){
print(val);
setState(() {
this._CheckboxVal=val;
});
}),
],
);
}
}
6、输入框
TextEditingController _pswController=new TextEditingController();
//解耦合 复杂计算都放到controller里面
_pswController.addListener(() {
print(_pswController.text);
});
TextField(
autofocus: true,
decoration:InputDecoration(
labelText: "用户名",
hintText: "请输入用户名",
prefixIcon:Icon(Icons.assignment_ind)
) ,
//键盘
keyboardType: TextInputType.text,
onChanged: (val){
print(val);
},
),
TextField(
autofocus: false,
decoration:InputDecoration(
labelText: "密码",
hintText: "请输入密码",
prefixIcon:Icon(Icons.remove_red_eye),
) ,
//键盘
keyboardType: TextInputType.text,
//密码输入框
obscureText: true,
controller: _pswController,
)
表单
//表单 声明key
GlobalKey _formKey=new GlobalKey();
//拿到表单的值
TextEditingController _usernameController=new TextEditingController();
//表单
Form(
key:_formKey,
autovalidate: true,
child:new Column(
children: [
//输入框 跟form搭配使用的
TextFormField(
autofocus:true ,
controller: _usernameController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "请输入用户名",
icon: Icon(Icons.perm_contact_calendar)
),
//校验值
validator: (val){
// trim()方法的作用就是去掉字符串前面和后面的空格.
if(val.trim().length<6){
return "用户名需要六位以上！";
}
return val.trim().length>0?null:"请输入用户名";
},
),
RaisedButton(
child: new Text("提交"),
onPressed: (){
// as FormState强制类型转换
if((_formKey.currentState as FormState).validate()){
print("提交给后台");
print(_usernameController);
print(_usernameController.text);
}
},
)
],
) ,
)
线性布局
row横向排列
column纵向排列
crossAxisAlignment: CrossAxisAlignment.center,
// start上边缘对齐
// end下边缘对齐
// center居中对齐
弹性布局
//方向 横向
direction: Axis.horizontal,
//方向 垂直
direction: Axis.vertical,
Flex和 Expanded成对使用 代表弹性布局
flex占据的份数
定位 SizedBox Positioned组成
body: SizedBox(
width: 400,
height: 400,
child: Stack(
alignment: Alignment.topRight,
children: [
Positioned(
left: 15,
top: 30,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
// Positioned(
// right:100,
// top: 30,
// child: Container(
// width: 300,
// height: 300,
// color: Colors.yellow,
// ),
// ),
],
),
)
流式布局 Wrap
spacing横向间距
runSpacing垂直间距
alignment: WrapAlignment.end,对齐方式
内边距
// padding: EdgeInsets.all(30),
// padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
padding: EdgeInsets.only(top: 100),
布局限制类容器
// body: SizedBox(具体宽高
// height: 400,
// width: 300,
// child: Container(
// color: Colors.red,
// ),
// ),
body: ConstrainedBox(范围
// constraints: BoxConstraints.expand(),//填满剩余容器
constraints: BoxConstraints(
// minWidth: double.infinity,横向填满
minWidth: 100,
minHeight: 200,
maxWidth: 200,
maxHeight: 300
),
child: Container(
width: 50,
height: 100,
color: Colors.red,
),
),
);
}
装饰容器
DecoratedBox对child进行修饰
//装饰容器
body: DecoratedBox(decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.yellow, Colors.red]),
borderRadius: BorderRadius.all(Radius.circular(3)),
boxShadow:[
BoxShadow(
color: Colors.black,
offset: Offset(3, 3),
blurRadius: 4.0
)
],
),
child: FlatButton(onPressed: null, child: Text("test")),
),
);
}
}
变换 Transform改变表现的样子，所占的位置还是原来的位置
skewX skewY拉伸
Container(
// color: Colors.red,
// child: Transform(
// transform: new Matrix4.skewX(0.5),
// transform: new Matrix4.skewY(0.5),
// child: Container(
// color: Colors.blue,
// child: Text("hhhhhhhhhh"),
// ),
// ),
// )
scale放大
Container(
color: Colors.red,
child: Transform.scale(
scale:4,
child: Container(
color: Colors.blue,
child: Text("hhhhhhhhhh"),
),
),
)
],
rotate旋转
Container(
color: Colors.red,
width: 300,
height: 300,
child: Transform.rotate(
angle:math.pi*3/4,
child: Container(
color: Colors.blue,
child: Text("hhhhhhhhhh"),
),
),
)
container
body: Column(
children: [
Container(
alignment: Alignment.bottomRight,
height: 200,
width: 300,
color: Colors.red,
child: Text("1111"),
//上下边距会相加
// margin: EdgeInsets.only(bottom: 20),
),
Container(
// margin: EdgeInsets.all(20),
margin: EdgeInsets.only(top: 20),
alignment: Alignment.bottomRight,
height: 200,
width: 300,
color: Colors.blue,
child: Text("222222"),
),
Container(
// margin: EdgeInsets.all(20),
padding: EdgeInsets.all(20),
alignment: Alignment.bottomRight,
color: Colors.yellow,
child: Text("333"),
),
],
),
可滚动的小部件 widget
Scrollbar结合 SingleChildScrollView形成可滚动的区域
只有一个元素并且长
body: Scrollbar(
child: SingleChildScrollView(
child: Container(
height: 3000,
color: Colors.red,
),
)),
listview组件 最常用
body: Column(
children: [
ListTile(
title: Text("固定的表头"),
),
Container(
height: 400,
child: ListView.builder(
itemCount: 50,
//每一个item的高度
itemExtent: 50,
itemBuilder: (BuildContext context, int index) {
// return Text("列表内容$index");
return Text("列表内容" + index.toString());
}),
)
],
),
GridView做九宫格八宫格的时候用
body: GridView(
//对GridView的限制
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//每一行有多少个
crossAxisCount: 4,
childAspectRatio: 1
),
children: [
Text("1"),
Text("2"),
Text("3"),
Text("4"),
Text("5"),
Text("6"),
Text("7"),
Text("8"),
Text("9"),
],
),