Flutter 学习笔记（二）----基本组件

吐槽

上一周都在看flutter的基本组件，主要是看技术胖的b站视频和官方的文档，看完才觉得还是先学下dart语法再学效果会好一点。明天要考试了很难受啊，自己还得晚上复习复习考试内容。
//主要是记载下自己看视频学习的代码，组件的用法一看就知道了

Text widget

最常用的组件，主要是看下省略点什么的怎么处理的

import 'package:flutter/material.dart';

void main() => runApp(Myapp());

class Myapp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: Center(
          child: Text(
            '啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦零零零零',
           // textAlign:TextAlign.center ,//居中对齐
            textAlign: TextAlign.right, //右对齐
            maxLines: 1, //最大显示函数
           // overflow:TextOverflow.clip,//省略文字
            //overflow: TextOverflow.ellipsis,//省略文字三个省略点
            overflow: TextOverflow.fade, //渐变
            //字体属性
            style: TextStyle(
              fontSize: 25.0,//字体大小
              color: Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline, //下划线
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }


}

Container widget 盒子布局

这个写前端的应该很清楚，但是对我们客户端来说我觉得这个就是一个跟布局，或者一个根View块这样的

child: Container(//创建盒子布局
          child: new Text('啦零零零零',style: TextStyle(fontSize: 40.0),),
          //alignment: Alignment.center,  //居中对齐
          alignment: Alignment.bottomRight, //下布局的位置左对齐
          width: 500.0,
          height: 400.0, //设置布局的宽高
          //color: Colors.lightBlue, //布局的颜色

         // padding: const EdgeInsets.all(10.0), //上下左右的边距
          padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0), //内边距
          margin: const EdgeInsets.all(10.0) //外边距

          // ignore: expected_token
          decoration: new BoxDecoration(
            gradient: const LinearGradient(
            colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]  //背景颜色
        )
            // ignore: expected_token
            border: Border.all(width: 2.0,color: Colors.red),  //外边框距离 颜色
        ),
        ),

imageview

• 资源目录
• asset本地路径
• file内存图片
• memorynetWork 网络图片

 child: Container(
          child: new Image.network('',
         // fit: BoxFit.contain,//尽量充满容器
          //  fit: BoxFit.fill, //充满容器
            //fit: BoxFit.fitWidth,//横向充满
           // fit: BoxFit.fitHeight, //纵向充满
           // fit: BoxFit.cover, //图片不变形 但是被裁切
            fit: BoxFit.scaleDown, //没有变化


            color: Colors.greenAccent, //图片颜色
            colorBlendMode:BlendMode.darken , //混合模式

            //repeat: ImageRepeat.noRepeat, //不重复
           // repeat: ImageRepeat.repeat //重复填充满
            repeat: ImageRepeat.repeatX, //x轴填充满



          ),
          width: 300.0,
          height: 200.0,
          color:Colors.amberAccent

        ),

ListView

普通使用

里面有个widget数组，处理起来还是很方便的

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget"),),
        body: new ListView(
          children: <Widget>[ //一个数组
            new ListTile( //第一行信息
              leading: new Icon(Icons.perm_camera_mic), //图片信息
              title: new Text('第一个'),                 //文字
            ),
            new ListTile(
              leading: new Icon(Icons.access_alarm),
              title: new Text("第二个"),
            ),
            new Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg")
          ],
        ),
      ),
    );
  }
}

横向/纵向使用

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal, //横向布局
      //scrollDirection: Axis.vertical, //竖向布局
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.red,
        ),
        new Container(
          width: 180.0,
          color: Colors.black,
        ),
        new Container(
          width: 180.0,
          color: Colors.yellow,
        )
      ],
    );
  }

}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget")),
        body: Center(
          child: Container(
            height: 200.0,
           child: MyList(),
          ),
        ),

      ),
    );
  }

}

动态数据

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(10000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget{
  final List<String> items;
  MyApp({Key key,@required this.items}):super (key:key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget")),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        )

      ),
    );
  }
}

GridView

class MyApp extends StatelessWidget{
 // final List<String> items;
 // MyApp({Key key,@required this.items}):super (key:key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget")),
        body: GridView.count(
          padding:const EdgeInsets.all(20) , //内边距
          crossAxisSpacing: 10.0, //网格的距离
          crossAxisCount: 3, //每一行多少列
          children: <Widget>[
            const Text('啦啦啦1'),
            const Text('啦啦啦2'),
            const Text('啦啦啦3'),
            const Text('啦啦啦4'),
            const Text('啦啦啦5'),
            const Text('啦啦啦6'),
          ],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
          body:GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                childAspectRatio: 0.7
            ),
            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),
              new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),

            ],
          )
      ),
    );
  }
}

布局

横向布局

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('水平方向布局'),
         ),

        body: new Row(
         children: <Widget>[
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.redAccent,
            child: new Text('啦啦啦啦'),
          ), ) ,
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.yellow,
            child: new Text('啦啦啦啦'),
          ), ) ,
          Expanded(child:new RaisedButton(
            onPressed: (){},
            color: Colors.blueAccent,
            child: new Text('啦啦啦啦'),
          ), ) ,

         ],
        ),
      ),
    );
  }
}

纵向布局

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('纵向方向布局'),
         ),

        body: Center(child: new Column(
          //crossAxisAlignment: CrossAxisAlignment.start, //左对齐
          crossAxisAlignment: CrossAxisAlignment.center,//居中对齐 辅轴
          mainAxisAlignment: MainAxisAlignment.center, //主轴 中间对齐

          children: <Widget>[
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.redAccent,
              child: new Text('啦啦啦啦'),
            ), ) ,
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.yellow,
              child: new Text('啦啦啦啦'),
            ), ) ,
            Expanded(child:new RaisedButton(
              onPressed: (){},
              color: Colors.blueAccent,
              child: new Text('啦啦啦啦'),
            ), ) ,

          ],
        ),)
      ),
    );
  }
}

层叠方式

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(  //层叠
      alignment: const FractionalOffset(0.5, 0.8), //对齐方式 0到1
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg"),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.pink,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('dev爱你呦'),
        )
      ],
    );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('水平方向布局'),
         ),

        body: Center(
          child: stack,

        )
      ),
    );
  }
}

精确设置布局位置

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(  //层叠
      alignment: const FractionalOffset(0.5, 0.8), //对齐方式 0到1
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561478490461&di=a7ac2e32bb630656aa7f96257f834f35&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201709%2F07%2F20170907202410_HYAKV.thumb.700_0.jpeg"),
          radius: 100.0,
        ),
        new Positioned(
          top: 10.0,
          left: 10.0,
          child: new Text('llll'),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text('222'),
        )
      ],
    );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('水平方向布局'),
         ),

        body: Center(
          child: stack,

        )
      ),
    );
  }
}

卡片布局

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
  var card = new Card(
    child: Column(
      children: <Widget>[
        ListTile(
          title: Text('吉林省啦啦啦',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        ),
        new Divider(),
        ListTile(
          title: Text('吉林省啦啦啦',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        ),
        new Divider(),
        ListTile(
          title: Text('吉林省啦啦啦',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('145678904567890'),
          leading: new Icon(Icons.account_box,color: Colors.pink,),
        )
        
      ],
    ),
  );

    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
         appBar: new AppBar(
           title: new Text('水平方向布局'),
         ),

        body: Center(
          child: card,

        )
      ),
    );
  }
}

导航跳转

这个感觉就是和安卓里面activity跳转类似，但是里面有个跳转的主件Navigator

void main(){
  runApp(MaterialApp(
    title: "导航演示",
    home: new FirstScreen()
  ));
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('第二个页面'),),
      body: Center(
        child: RaisedButton(
          child: Text('返回'),
          onPressed: (){
            Navigator.pop(context); //返回上一页
          },
        ),
      ),
    );
  }

}

向下一页开始传值跳转

import 'package:flutter/material.dart';

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: (){
              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}'),),
    );
    
  }
}

向上一页开始传值

import 'package:flutter/material.dart';

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: (){
        _navigateToXiaoJieJie(context);
      },
      child: Text('小姐姐啦啦啦'),
    );
  }


  _navigateToXiaoJieJie(BuildContext context) async{
    final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context)=>XiaoJieJie())
    );
    
    Scaffold.of(context).showSnackBar(SnackBar(content:Text('$result')));
  }
}

class XiaoJieJie 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,'大长腿小姐姐：56789990');
              },
            ),
            RaisedButton(
              child: Text('大长腿小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿小姐姐：56789990');
              },
            ),
            RaisedButton(
              child: Text('大长腿小姐姐'),
              onPressed: (){
                Navigator.pop(context,'大长腿小姐姐：56789990');
              },
            ),
          ],
        ),
      ),
    );
  }
}

总结

感觉基本布局，控件什么的用到比安卓麻烦很多，最关键的是自己看不见UI就很尴尬，每次热更新下也很麻烦唉。