1.环境搭建
先省去了，要睡觉，有时间再整理
2.基础界面
1.创建一个简单的结构
import 'package:flutter/material.dart';
//入口
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(//Android=》MeterialApp结构
title: '大龙App',
theme: ThemeData(//主题
primaryColor: Colors.red
),
home: Scaffold(//脚手架：appbar,body,bottombar...一套结构
appBar: AppBar(
title: Text('标题'),
centerTitle: true,//内容居中
),
body: Container( //相似于html的div
child: Container(
width: 400,
child:MyHome()
),
),
),
);
}
}
这是一个基础的简单的app结构项目
2.常用的View 详解：
1.Container：类似于html的Div
/**
* div学习
* */
new Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 20.0),), //子内容
alignment:FractionalOffset(0.5, 0.5),//位置，x,y 0-1
padding: EdgeInsets.all(0.5),//padding
margin: EdgeInsets.all(10),//margin
decoration: new BoxDecoration( //设置边框，渐变，倒角，以及背景图片等
// gradient: LinearGradient(colors: [Colors.yellow,Colors.red]),
border: Border.all(style: BorderStyle.solid,width: 3.0,color: Colors.blue),
borderRadius: BorderRadius.all(Radius.circular(30)),
image: DecorationImage(
image: NetworkImage(
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4122685442,159580239&fm=27&gp=0.jpg'),
fit: BoxFit.fill
)
),
);
2.Text
return new Text(
'Hello DaLong 第三个第三个第送到工地施工图是的根深蒂固撒多格杜兽',//内容区域
textAlign: TextAlign.left,//左对齐
style: TextStyle(fontSize: 25,fontWeight: FontWeight.w400,color:Colors.red,
decoration:TextDecoration.underline, //设置下划线
decorationStyle:TextDecorationStyle.dashed,//设置下划线的颜色
),//style:字体大小，加粗，颜色，下划线，下环线颜色，下划线类型。。。
maxLines: 1,//最大展示一行
overflow: TextOverflow.ellipsis,//超出...
);
3.Image
image:NetworkImage(//网络图片为例，可以展示多种的
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4122685442,159580239&fm=27&gp=0.jpg'),
fit: BoxFit.fill //展示类型
)
3.常用的ViewGroup
1.ListView
new ListView(
scrollDirection: Axis.horizontal,//默认垂直，可以选择水平
children: <Widget>[
new ListTile(title: new Text('啊啊啊'),subtitle: new Text('徐文龙'),leading: new Icon(Icons.accessibility,color: Colors.blue,size: 40,),),
new ListTile(title: new Text('啊啊啊'),),
new ListTile(title: new Text('啊啊啊'),),
new ListTile(title: new Text('啊啊啊'),)
],
);
2.GlidViewGridView
GlidViewGridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,//显示几行
childAspectRatio: 0.7,//*宽高比重
crossAxisSpacing: 3,//水平间距
mainAxisSpacing: 3,//垂直间距
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
.....
],
);
3.水平布局Row
Row(
//如果是row，mainAxisAlignment主轴是水平的
mainAxisAlignment: MainAxisAlignment.center,//如果是 column 垂直是主轴
crossAxisAlignment:CrossAxisAlignment.end,
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('红色按钮')
),
Expanded(child: new RaisedButton( //这个布局相当于xml的weidgh，自动沾满
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黄色按钮'),
)),
new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按钮')
)
],
);
4.垂直布局Column
new Column(
textBaseline: TextBaseline.ideographic,
mainAxisAlignment: MainAxisAlignment.center,//如果是 column 垂直是主轴
crossAxisAlignment:CrossAxisAlignment.end,
children: <Widget>[
Container(
child: Text('啊啊'),
width: 1000,
alignment: FractionalOffset(0.8, 0),
),
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
);
5.重叠布局Stack
new Stack(
alignment: const FractionalOffset(0.5, 0.8),//只针对两个重叠的情况用这个属性，加入多个子属性不适合用
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text('JSPang 技术胖'),
)
],
);
如果要是多个子布局需要排版的话，需要绝对布局
new Stack(
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Positioned(
top:10.0,
left:10.0,
child: new Text('JSPang.com'),
),
new Positioned(
bottom:10.0,
right:10.0,
child: new Text('技术胖'),
)
],
);
6.IndexStack
new IndexedStack(
index: 2, //显示第几个
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Positioned(
top:10.0,
left:10.0,
child: new Text('JSPang.com'),
),
......
6.Card 布局
new Card(
elevation: 10,//阴影
color: Colors.blue,//背景颜色
child:new Container(
width: 200,
height: 200,
),
)
