Flutter笔记

入口方法

void main() {//dart入口
  runApp(MyApp());//flutter入口
}

自定义无状态组件

基本格式：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(title: Text("xxx"),)
        body: body(),
      ),
    );
  }
}

文本：

class TextView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("data",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 25,
          fontWeight: FontWeight.bold,
          fontStyle: FontStyle.normal,
          letterSpacing: 5,
          decoration: TextDecoration.underline,
          decorationColor: Colors.yellow,
          decorationStyle: TextDecorationStyle.dotted),
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.start,
        overflow: TextOverflow.fade,
        maxLines: 2);
  }
}

裁剪：

class ClipView_1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      //裁剪1
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.blue, width: 5),
            borderRadius: BorderRadius.all(Radius.circular(20)),
            image: DecorationImage(
                image:
                    NetworkImage("https://www.itying.com/images/flutter/1.png"),
                fit: BoxFit.cover)),
      ),
    );
  }
}

class ClipView_2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      //裁剪2
      child: Container(
        child: ClipOval(
          child: Image.network(
            "https://www.itying.com/images/flutter/1.png",
            fit: BoxFit.cover,
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

列表：
listData.dart：

List data=[
  {
    "title":"标题1111",
    "content":"内容1",
    "time":"2020-20-20"
  },
  {
    "title":"标题2",
    "content":"内容2",
    "time":"2020-20-21"
  },
  {
    "title":"标题3",
    "content":"内容3",
    "time":"2020-20-22"
  },
  {
    "title":"标题4",
    "content":"内容4",
    "time":"2020-20-23"
  },
  {
    "title":"标题5",
    "content":"内容5",
    "time":"2020-20-24"
  }

];

import 'listData.dart';

class DynamicListView1 extends StatelessWidget {
  List<Widget> getListView() {
    return data.map((val) {
      return ListTile(
        title: Text(val['title']),
        subtitle: Text(val['content']),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
        scrollDirection: Axis.vertical, //方向，默认垂直
        children: getListView());
  }
}

class DynamicListView2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(data[index]['title']),
            subtitle: Text(data[index]['time']),
          );
        });
  }
}

GridView：

class MyGridView extends StatelessWidget {
  Widget buildChild() {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: 2),
          borderRadius: BorderRadius.circular(4)),
      child: Column(
        children: <Widget>[
          Image.network("https://www.itying.com/images/flutter/4.png"),
          TextView()
        ],
      ),
    );
  }
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    return GridView.count(  //第一种生成方法
//      crossAxisCount: 2,
//      crossAxisSpacing: 10,
//      mainAxisSpacing: 10,
//      padding: EdgeInsets.all(10),
//      children: <Widget>[
//        buildChild(),
//        buildChild(),
//        buildChild(),
//        buildChild(),
//        buildChild(),
//        buildChild(),
//
//      ],
//    );
//

    return GridView.builder(//第二种生成方法
      itemCount: 5,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10),
      itemBuilder: (context, index) {
        return buildChild();
      },
    );
  }
}

流式布局：

//可实现流式布局
class MyWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,
      runSpacing: 40,
      alignment: WrapAlignment.end,
      //横轴对其方式
      runAlignment: WrapAlignment.center,
      //纵轴对其方式,,
      children: <Widget>[
        Button("xxx"),
        Button("xxxxxx"),
        Button("xx"),
        Button("xxxxxaaaaaax"),
        Button("xxxdasdsa"),
        Button("xxxdasdsa"),
        Button("xxxdasdsa"),
        Button("xxxda"),
        Button("xxxdadasdsa"),
        Button("xxxdasdsa"),
        Button("xxxdaa"),
      ],
    );
  }
}


class Button extends StatelessWidget {
  String text;

  Button(this.text);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(text),
      color: Colors.white10,
      focusColor: Colors.blue,
      textColor: Colors.amber,
      hoverColor: Colors.black,
      onPressed: () {},
    );
  }
}