Flutter之旅-组件

Text组件

child: Text(
  'Hello widget flutter 是我最新要学习的技术，我主要研究他的dart语法，还 
  有flutter国际化',
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
      color: Colors.red,
      fontSize: 20.0,
      fontFamily: '黑体',
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.dashed),
),

Container组件

//容器 相当于div
child: Container(
  child: Text('Hello yjs',style: TextStyle(fontSize: 40),),
  //对其方式，对子组件设置style
  alignment: Alignment.topLeft,
  //记住带这小数点后一位
  width: 500.0,
  height: 400.0,
  //返回一个常量 const EdgeInsets all 上下左右 fromLTRB 设置上下左右各自
  padding: const EdgeInsets.fromLTRB(10,20,0,0),
  margin: const EdgeInsets.all(10.0),
  //可以做背景渐变
  decoration: new BoxDecoration(
    //线性渐变
    gradient: const LinearGradient(
        colors:[Colors.lightBlue,Colors.red,Colors.green]
    ),
    //添加边框
    border: Border.all(width: 5.0,color: Colors.deepPurpleAccent)
  ),
),

Image组件

child: Container(
  //Image组件
  //Image.network(url)
  // Image.asset(name)
  // Image.file(file)
  // Image.memory(bytes)
  child: new Image.network(
    "https://cms- bucket.nosdn.127.net/e2af1d563faa46d0aa19da87f83159fd20180418131040.jpeg",
     //自适应 BoxFit.contain/充满 BoxFit.fill
    //横向调整 BoxFit.fitWidth /纵向调整 BoxFit.fitHeight/裁切 
    //BoxFit.cover/保持原图大小不变BoxFit.scaleDown
    //fit: BoxFit.fitHeight,
    //图片混合  先设置图片颜色
    color: Colors.green,
    //设置混合模式
    colorBlendMode: BlendMode.darken,
    //图片重复，repeat 重复填满容器   repeatX 横向重复   repeatY 纵向重复
    repeat: ImageRepeat.repeat,
  ),
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
),

listview 组件

1 listView 纵向列表
body:new ListView(
  children: <Widget>[
    //tile 瓦片 
    ListTile(
      //最前面
      leading: new Icon(Icons.card_giftcard),
      title: new Text('list view'),
    ),
    ListTile(
      //leading 最前面
      leading: new Icon(Icons.account_balance),
      title: new Text('list view'),
    ),
    ListTile(
      //最前面
      leading: new Icon(Icons.time_to_leave),
      title: new Text('list view'),
    ),
    new Image.network("https://cms- bucket.nosdn.127.net/e2af1d563faa46d0aa19da87f83159fd20180418131040.jpeg"),
    new Image.network("https://cms-bucket.nosdn.127.net/f90b03a4bac34419b4bc0b22f4d989b420180411100506.jpeg"),
    new Image.network("https://cms-bucket.nosdn.127.net/eb411c2810f04ffa8aaafc42052b233820180418095416.jpeg"),
    new Image.network("https://cms-bucket.nosdn.127.net/cb37178af1584c1588f4a01e5ecf323120180418133127.jpeg"),
  ],
)

2 listview横向属性
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      //横向属性
      scrollDirection: Axis.horizontal,
      children: <Widget>[
         new Container(
           width: 180.0,
           color: Colors.blue,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.green,
        ),
        new Container(
          width: 180.0,
          color: Colors.red,
        ),
      ],
    );
  }
}

3 动态列表

void main() => runApp(MyApp(
  //传递参数 list
  //声明list数组  items:List()   items:List(1000)   
 //items:List<String>(1000)   items:[1,2,3]
 //generate 生成
 items:List<String>.generate(1000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget {
  //利用构造函数 接收传递过来对list
  final List<String> items;
  //Key 固定写法 required 表示list这个参数是必须传递的
  MyApp({Key key,@required this.items}):super(key:key);
  @override
  Widget build(BuildContext context) {
    //build 返回一个buildcontent内存
   //flutter一切皆组件 widget
    return MaterialApp(
      title: 'Welcome to Flutter',
      //scaffold 脚手架
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        //ListView.builder 生成动态列表
        body: new ListView.builder(
          itemCount: items.length,
          //
          itemBuilder:(context,index){
            return new ListTile(
             title: new Text("${items[index]}")
            );
          },
        )
      ),
    );
  }
}

4 网格列表

body: GridView.count(
    padding: const EdgeInsets.all(20.0),
    //网格的间距
    crossAxisSpacing: 10.0,
    //每一行的列数
    crossAxisCount: 2,
    children: <Widget>[
      const Text("公众号：IT烟酒僧"),
      const Text("公众号：IT烟酒僧"),
      const Text("公众号：IT烟酒僧"),
    ],
)

5 网格列表(常用写法)
body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      //纵轴的距离
      mainAxisSpacing: 4.0,
      //横轴的距离
      crossAxisSpacing: 4.0,
      //横竖比--宽比高
      childAspectRatio: 0.7),
  children: <Widget>[
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/11/154532.10958792_285X160X4.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/11/111918.17415581_285X160X4.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/11/102148.75677600_285X160X4.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/09/110806.31988033.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2019/12/27/101620.49593666_170X256X4.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2019/10/22/153009.38205086_1280X720X2.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2019/12/24/093829.37369362.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/07/120350.95875826.jpg",
      fit: BoxFit.cover,
    ),
    Image.network(
  "http://img5.mtime.cn/mg/2020/01/11/093036.89094227_285X160X4.jpg",
      fit: BoxFit.cover,
    ),
  ],
  padding: const EdgeInsets.all(10.0),
)),

Row 横向布局

body: new Row(
  children: <Widget>[
    //expand 灵活布局，自动填充，改变宽度，宽度上平均分配
    Expanded(
      child: new RaisedButton(
        onPressed: () {},
        color: Colors.redAccent,
        child: new Text('Red Button'),
      ),
    ),
    Expanded(
      child: new RaisedButton(
        onPressed: () {},
        color: Colors.blue,
        child: new Text('Blue Button'),
      ),
    ),
    Expanded(
      child: new RaisedButton(
        onPressed: () {},
        color: Colors.green,
        child: new Text('Green Button'),
      ),
    ),
  ],
),

Column 水平布局

 body: Center(child: new Column(
  //Column 的长度由children中最长的自布局长度决定
  //副轴方向 crossAxisAlignment 对齐方式
  //主轴方向 main
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('公众号：IT烟酒僧'),
    Text('公众号：IT烟酒僧'),
    Text('公众号：IT烟酒僧'),
    Expanded(child:Text('公众号：IT烟酒僧'),),
    Text('公众号：IT烟酒僧'),
    Text('公众号：IT烟酒僧'),
    Text('公众号：IT烟酒僧'),
    Text('公众号：IT烟酒僧'),
  ],
),)

层叠组件 stack

var stack=new Stack(
  //设置字在图片的相对位置，相对与左上角0。0
  alignment: const FractionalOffset(0.5, 0.03),
  children: <Widget>[
    //CircleAvatar 圆形头像
    new CircleAvatar(
      backgroundImage: new NetworkImage("http://img5.mtime.cn/mg/2020/01/11/093036.89094227_285X160X4.jpg"),
      radius: 100.0,
    ),
    new Container(
      decoration: new BoxDecoration(
        color: Colors.lightBlue,
      ),
      padding: EdgeInsets.all(5.0),
      child: new Text('IT烟酒僧'),
    )
  ],
);

层叠组件--相对位置层叠 Positioned

var stack = new Stack(
  //设置字在图片的相对位置，相对与左上角0。0
  alignment: const FractionalOffset(0.5, 0.03),
  children: <Widget>[
    //CircleAvatar 圆形头像
    new CircleAvatar(
      backgroundImage: new NetworkImage(
      "http://img5.mtime.cn/mg/2020/01/11/093036.89094227_285X160X4.jpg"),
      radius: 100.0,
    ),

    // 相对位置层叠
    new Positioned(top: 10.0, left: 10.0, child: new Text("IT烟酒僧")),

    new Positioned(bottom: 10.0, right: 10.0, child: new Text("IT烟酒僧")),

    new Positioned(top: 50.0, left: 50.0, child: new Text("IT烟酒僧"))
  ],
);

卡片布局 card

var card=new Card(
  margin: EdgeInsets.all(20.0),
  child: Column(
    children: <Widget>[
      ListTile(
        title: new Text('IT烟酒僧',style: TextStyle(fontWeight: FontWeight.w500),),
        subtitle: Text(('151062111')),
        leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
      ),
      ListTile(
        title: new Text('海淀区中国矿业大学',style: TextStyle(fontWeight: FontWeight.w500),),
        subtitle: Text(('151062111')),
        leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
      ),
      ListTile(
        title: new Text('海淀区中关村',style: TextStyle(fontWeight: FontWeight.w500),),
        subtitle: Text(('151062111')),
        leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
      ),
    ],
  ),
);

页面跳转

一级页面

class firstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('导航页面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('查看详情商品'),
          onPressed: (){
            //页面跳转
            Navigator.push(context, MaterialPageRoute(
              builder: (context)=>new SecondScreen()
            ));
          },
        ),
      ),
    );
  }
}

二级页面

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品详情页'),
      ),
      body: RaisedButton(
        child: Text('返回'),
        onPressed: (){
           Navigator.pop(context);
        },
       ),
    );
  }
}

页面跳转—传递参数

class Product{
  final String title; //商品标题
  final String description; // 商品描述
  Product(this.title,this.description);
}

void main(){
  runApp(MaterialApp(
    title: '导航的数据传递和接收',
    home: Productlist(
      products:List.generate(20, (i)=>Product('商品$i','这是一个商品详情编号$i'))
    ),
  ));
}

class Productlist extends StatelessWidget{
  final List<Product> products;
  Productlist({Key key,@required this.products}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: ListView.builder(
          itemCount: products.length,
          itemBuilder: (context,index){
            return ListTile(
              title: Text(products[index].title),
              //ontap当点击时有一个相应事件,
              onTap: (){
                Navigator.push(context, MaterialPageRoute(
                  builder: (context)=>ProductDetail(product:products[index])
                ));
              },
            );
          }
      ),
    );
  }
}

class ProductDetail extends StatelessWidget{
  final Product product;
  ProductDetail({Key key,@required this.product}):super(key:key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

flutter页面跳转之参数回传

void main(){
  runApp(MaterialApp(
    title: '页面跳转返回数据',
    home: FirstPage(),
  ));
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('找小姐姐要微信'),
      ),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _NavigateToXjj(context);
      },
      child: Text('去找小姐姐'),
    );
  }
}

//_下划线一般代表内部的方法
//async 异步
_NavigateToXjj(BuildContext context) async{
  //异步请求等待返回结果
  final result=await Navigator.push(context, MaterialPageRoute(
    builder: (context)=>xjj()
  ));
  //利用SnackBar 显示回传回来的结果
  Scaffold.of(context).showSnackBar(SnackBar(content: Text(result),));
}

class xjj extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我是小姐姐'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('大长腿小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿小姐姐 16515243678');
              },
            ),
            RaisedButton(
              child: Text('小蛮腰小姐姐'),
              onPressed: (){
                Navigator.pop(context,'小蛮腰小姐姐 1345243690');
              },
            ),
          ],
        ),
      ),
    );
  }
}

引入静态资源目录

在根目录下建立image文件，存放图片资源

在pubspec.yaml文件中新建静态资源路径
assets:
  - image/hml.jpg

在代码中引入
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.asset('image/hml.jpg'),
    );
  }
}