Flutter学习笔记

学习flutter应该也有一个多星期了，感觉到了一个节点，所以准备吧之前学习的做个整理。

环境配置安装这个网上一大推，我就不说了。我这的基础文章主要包含 text，container ，imageview， listview ，gridview ，card ，row ，column， stack， raiseButton， 到页面的跳转，传参， 关闭上个界面， 返回数据的基本用法。想看效果的直接复制下来代码然后改FirstPage(),改成对应的view

image.png

import 'package:flutter/material.dart';

void main() => runApp(MyApp(items: new List.generate(100, (i) => 'item $i')));

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final List items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var card = new Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text('aaaaaaaaaaaa'),
            subtitle: Text('azzzzzzzz'),
            leading: Icon(
              Icons.ac_unit,
              color: Colors.red,
            ),
          ),
          new Divider(),
          ListTile(
            title: Text('bbbbbbbb'),
            subtitle: Text('bccccccccccz'),
            leading: Icon(
              Icons.ac_unit,
              color: Colors.yellow,
            ),
          ),
        ],
      ),
    );

    var container = new Container(
      child: Text(
        'aaaaaaaa',
        style: TextStyle(fontSize: 20.3, color: Colors.yellow),
      ),
      //color: Colors.red,
      width: 400.0,
      height: 200.8,
      //alignment: Alignment.centerRight, //内部对齐方式
      //padding: EdgeInsets.all(10),//padding
      padding: EdgeInsets.fromLTRB(10, 5, 3, 1),
      margin: EdgeInsets.all(10),
      decoration: new BoxDecoration(
          //加个渐变
          gradient:
              LinearGradient(colors: [Colors.red, Colors.yellow, Colors.black]),
          border: Border.all(width: 2.9, color: Colors.black)),
    );

    var image = new Image.network(
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545804531737&di=6c62b256f7e9edba267d80ab7541a427&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D4af020d471cb0a46912f837a030a9c51%2Ff31fbe096b63f6242d63fb2d8d44ebf81a4ca3e6.jpg',
      // fit: BoxFit.cover,
      color: Colors.yellow, // 和下面的属性两个连起来 设置图片的颜色属性
      colorBlendMode: BlendMode.colorDodge,
      repeat: ImageRepeat.repeatX,
    );

    var listview = new ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        ListTile(
          leading: new Icon(Icons.ac_unit), //图标
          title: Text('listview1'),
        ),
        ListTile(
          leading: new Icon(Icons.ac_unit), //图标
          title: Text('listview2'),
        ),
        ListTile(
          leading: new Icon(Icons.ac_unit), //图标
          title: Text('listview3'),
        ),
      ],
    );

    var listview1 = new Container(
        height: 200.9,
        child: new ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            new Container(
              color: Colors.yellow,
              width: 180.8,
            ),
            new Container(
              color: Colors.red,
              width: 180.8,
            ),
            new Container(
              color: Colors.black,
              width: 180.8,
            ),
          ],
        ));

    var listview2 = new ListView.builder(
      //动态数据
      itemBuilder: (context, index) {
        return new ListTile(
          title: Text('${items[index]} 条目'),
        );
      },
      itemCount: items.length,
    );

    var grid = new GridView.count(
      padding: EdgeInsets.all(10.1),
      crossAxisSpacing: 10.2, //各个item边距的距离
      crossAxisCount: 3, //单行显示几个
      children: <Widget>[
        Text('text1'),
        Text('text2'),
        Text('text3'),
        Text('text4'),
        Text('text5'),
      ],
    );

    var grid2 = new GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 3.0, //纵轴的间距
        crossAxisSpacing: 5.9, //横轴的间距
        childAspectRatio: 1.5, //宽高比列
      ),
      children: <Widget>[
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg',
            fit: BoxFit.cover),
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343796&di=e9fc0db559b8d9aa2720fb7d757b8d7a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D4af020d471cb0a46912f837a030a9c51%2Ff31fbe096b63f6242d63fb2d8d44ebf81a4ca3e6.jpg',
            fit: BoxFit.cover),
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343796&di=0918824b3bb836e6f157532d87fca73e&imgtype=0&src=http%3A%2F%2Fac-r.static.booking.cn%2Fimages%2Fhotel%2Fmax1024x768%2F987%2F98767654.jpg',
            fit: BoxFit.cover),
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg',
            fit: BoxFit.cover),
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343796&di=e9fc0db559b8d9aa2720fb7d757b8d7a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D4af020d471cb0a46912f837a030a9c51%2Ff31fbe096b63f6242d63fb2d8d44ebf81a4ca3e6.jpg',
            fit: BoxFit.cover),
        Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343796&di=0918824b3bb836e6f157532d87fca73e&imgtype=0&src=http%3A%2F%2Fac-r.static.booking.cn%2Fimages%2Fhotel%2Fmax1024x768%2F987%2F98767654.jpg',
            fit: BoxFit.cover),
      ],
    );

    var row = new Row(
      children: <Widget>[
        RaisedButton(
          onPressed: () {},
          color: Colors.yellow,
          textColor: Colors.blue,
          child: Text('1111111'),
        ),
        Expanded(
            //没加这个的，正常显示，加这个的会吧剩下空间的充满
            child: RaisedButton(
          onPressed: () {},
          color: Colors.red,
          textColor: Colors.blue,
          child: Text('22222'),
        )),
        RaisedButton(
          onPressed: () {}, //不加这个 下面的设置颜色都显示不出来
          color: Colors.yellow,
          textColor: Colors.blue,
          child: Text('4'),
        ),
      ],
    );

    var colum = new Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('11111111'),
        Expanded(
          child: Image.network(
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg',
            fit: BoxFit.fill,
            color: Colors.yellow,
          ),
        ),
        Text(
          '3333333333',
          style: TextStyle(color: Colors.red),
        )
      ],
    );

    var stack = new Stack(
      alignment: FractionalOffset(0.5, 0.8), //相对于下面的图片的宽高的比列，只能用于两个控件进行重叠
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg'),
          radius: 120, //圆的半径
        ),
        Container(
          color: Colors.red,
          child: Text('111111111111'),
          padding: EdgeInsets.all(3.3),
        ),
        /* RaisedButton(
          child: Text('button'),
          color: Colors.yellow,
          onPressed: () {},
        ),*/
      ],
    );

    var stack2 = new Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg'),
          radius: 100.2,
        ),
        Positioned(
          child: Text('aaaaaaaaaaaa'),
          top: 100.8,
          left: 100.9,
        ),
        Positioned(
          child: Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545816343797&di=595fadddf8be79f869d2dbaa722ebddd&imgtype=0&src=http%3A%2F%2Ffile25.mafengwo.net%2FM00%2F0A%2FAC%2FwKgB4lMC26CAWsKoAALb5778DWg60.rbook_comment.w1024.jpeg'),
          right: 10.8,
          bottom: 100.9,
        ),
      ],
    );

    return MaterialApp(
      title: '1111',
      home: Scaffold(
        appBar: AppBar(title: Text('ydd  demo')),
        body: Center(
          child: FirstPage(),
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: RaisedButton(
        onPressed: () {
          _navigateToRoutePage(context);
        },
        child: Text('第一个界面'),
      ),
    );
  }
}

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

class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('返回'),
      ),
      body: RaisedButton(
        onPressed: () {
          Navigator.pop(context, '收拾收拾多发所过付多所过所的');
        },
        child: Text('返回上个界面'),
      ),
    );
  }
}

github地址 https://github.com/yzxzm/flutter_ydd