Flutter第一天

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,
        ),
      )
复制代码