Flutter组件随笔练习

Container组件

代码语言：javascript复制

import 'package:flutter/material.dart'; //快捷方式:fim

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(primarySwatch: Colors.blueGrey),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Text(
          '我是一个类似div组件',
          textAlign: TextAlign.left,
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
          textScaleFactor: 2,
          style: TextStyle(
              fontSize: 16.0, //字体大小
              color: Colors.red, //字体颜色
              fontWeight: FontWeight.w500, //加粗
              fontStyle: FontStyle.italic, //斜体
              decoration: TextDecoration.lineThrough, //删除线
              decorationColor: Colors.grey, //中间删除线颜色
              decorationStyle: TextDecorationStyle.dashed, //中间删除线为虚线
              letterSpacing: 5.0 //文字间隔
              ),
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          //绘制盒子的方法
          color: Colors.yellow,
          border: Border.all(color: Colors.blue, width: 2.0),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        // padding: EdgeInsets.fromLTRB(10, 30, 5, 0),
        padding: EdgeInsets.all(20), //内边距
        margin: EdgeInsets.fromLTRB(10, 30, 5, 0), //外边距
        // transform: Matrix4.translationValues(100, 0, 0),
        // transform: Matrix4.rotationZ(0.3),
        alignment: Alignment.bottomLeft,
      ),
    );
  }
}

Image组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        // 圆形图片
        child: ClipOval(
            child: Image.network(
          'https://sucai.suoluomei.cn/sucai_zs/images/20200215152501-1.png',
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        )),
        // 另一张圆形图片的处理方法
        // child: Image.network(
        //   "https://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg",
        //   alignment: Alignment.bottomRight,
        //   color: Colors.grey,
        //   colorBlendMode: BlendMode.screen,
        //   fit: BoxFit.cover,
        //   // repeat: ImageRepeat.repeatY,
        // ),
        height: 300.0,
        width: 300.0,
      ),
    );
  }
}

ListView组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      scrollDirection: Axis.horizontal, //横向列表
      children: <Widget>[
        // 垂直列表
        // ListTile(
        //   leading: Image.network( //放置位置在前面
        //       "https://sucai.suoluomei.cn/sucai_zs/images/20200305110600-1.png"),
        //   trailing: Icon( //放置位置在后面
        //     Icons.search,
        //     color: Colors.green,
        //     size: 30,
        //   ),
        //   title: Text(
        //     "新闻标题新闻标题",
        //     style: TextStyle(fontSize: 24),
        //   ),
        //   subtitle: Text("二级标题二级标题"),
        // ),

        // 垂直图文列表
        // Image.network(
        //     "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"),
        // Container(
        //   child: Text(
        //     "我是一个标题",
        //     textAlign: TextAlign.center,
        //     style: TextStyle(
        //       fontSize: 28,
        //     ),
        //   ),
        //   padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        // ),
      
        Container(
          width: 180.0,
          height: 100.0,
          color: Colors.deepOrange,
        ),
        Container(
          width: 180.0,
          height: 100.0,
          color: Colors.deepOrangeAccent,
        ),
        Container(
          width: 180.0,
          height: 100.0,
          color: Colors.deepPurple,
        ),
      ],
    );
  }
}

GridView组件

代码语言：javascript复制

// 自定义Json数据
List listData = [
  {
    "title": "模拟Json数据1",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  },
  {
    "title": "模拟Json数据2",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  },
  {
    "title": "模拟Json数据3",
    "author": "Dart",
    "imageUrl": "http://sucai.suoluomei.cn/sucai_zs/images/20200226173153-2.jpg"
  },
];

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(height: 10),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
                color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisSpacing: 10.0, //横向之间的距离
      mainAxisSpacing: 10.0, //纵向之间的距离
      padding: EdgeInsets.all(10),
      // childAspectRatio: 0.7, //宽高比例
      crossAxisCount: 2, //一行有多少个组件
      children: this._getListData(),
    );
  }
}

Padding组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        childAspectRatio: 1.7, //宽高比例
        crossAxisCount: 2, //一行有多少个组件
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
                'http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
                'http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network(
                'http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg',
                fit: BoxFit.cover),
          ),
        ],
      ),
    );
  }
}

Row、Column、Expanded组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 180,
                color: Colors.black,
                child: Text('hello World'),
              ),
            )
          ],
        ),
        SizedBox(height: 10),
        Row(
          children: <Widget>[
            Expanded(
                flex: 2,
                child: Container(
                  height: 180,
                  child: Image.network(
                      "https://www.itying.com/images/flutter/2.png",
                      fit: BoxFit.cover),
                )),
            SizedBox(width: 10),
            Expanded(
                flex: 1,
                child: Container(
                    height: 180,
                    child: ListView(
                      children: <Widget>[
                        Container(
                          height: 85,
                          child: Image.network(
                              "https://www.itying.com/images/flutter/3.png",
                              fit: BoxFit.cover),
                        ),
                        SizedBox(height: 10),
                        Container(
                          height: 85,
                          child: Image.network(
                              "https://www.itying.com/images/flutter/3.png",
                              fit: BoxFit.cover),
                        )
                      ],
                    ))),
          ],
        )
      ],
    );
  }
}

Stack组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.red,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              child: Icon(Icons.search, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment(0, 0),
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.send, size: 40, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

Card组件

代码语言：javascript复制

List listData = [
  {
    "title": "Candy 11",
    "author": "Motolora",
    "imageUrl":
        "http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg",
    "description":
        "Flutter is very goodFlutter is very goodFlutter is very goodFlutter is very goodFlutter is very goodFlutter is very goodFlutter is very good",
  },
  {
    "title": "Candy 22",
    "author": "Motolora",
    "imageUrl":
        "http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg",
    "description": "Flutter is very good",
  },
];

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value) {
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(value["imageUrl"]),
                ),
                title: Text(value["title"]),
                subtitle: Text(
                  value["description"],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
  }
}

Wrap组件

代码语言：javascript复制

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.grey,
      child: Wrap(
        spacing: 10, //横轴之间的间距
        runSpacing: 10, //纵轴之间的间距
        // alignment: WrapAlignment.spaceEvenly,
        runAlignment: WrapAlignment.start,
        children: <Widget>[
          MyButton("斗罗大陆"),
          MyButton("少年歌行"),
          MyButton("百变小樱魔术卡"),
          MyButton("进击的巨人"),
          MyButton("神龙斗士"),
          MyButton("数码宝贝"),
          MyButton("海贼王"),
          MyButton("火影忍者"),
        ],
      ),
    );
  }
}

// 封装button组件
class MyButton extends StatelessWidget {
  final String text;
  const MyButton(this.text, {Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}

Button组件

代码语言：javascript复制

import 'package:flutter/material.dart';

class ButtonPage extends StatelessWidget {
  const ButtonPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("按钮演示页面"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('凸起按钮'),
                color: Colors.blue, //设置按钮颜色
                textColor: Colors.white, //设置文本颜色
                elevation: 5, //设置按钮阴影
                //设置按钮的圆角
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50)),
                splashColor: Colors.red, //长按水波纹的颜色
                onPressed: () {
                  print("执行事件");
                },
              ),
              RaisedButton.icon(
                icon: Icon(Icons.search),
                label: Text("图标按钮"),
                onPressed: () {},
              ),
              FlatButton(
                child: Text("扁平化按钮"),
                color: Colors.orange,
                textColor: Colors.white,
                onPressed: () {},
              ),
              OutlineButton(
                child: Text("线框按钮"),
                textColor: Colors.orange,
                onPressed: () {},
              ),
              //只有图标的按钮
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 50,
                width: 200,
                child: RaisedButton(
                  child: Text('设置按钮宽度高度'),
                  onPressed: () {},
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: RaisedButton(
                  child: Text('自适应按钮'),
                  onPressed: () {},
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

Form表单组件

代码语言：javascript复制

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
  FormPage({Key key}) : super(key: key);

  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  var userName = new TextEditingController(); //初始化给表单赋值
  var password;
  var flag = true;
  var sex = 1;
  @override
  void initState() {
    super.initState();
    userName.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("表单组件"),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          // child: TextDemo(),
          child: Column(
            children: <Widget>[
              TextField(
                maxLines: 4, //设置多行文本框
                // obscureText: true, //设置密码框
                decoration: InputDecoration(
                    icon: Icon(Icons.people), //左边icon
                    hintText: "请输入账号", //占位
                    border: OutlineInputBorder(), //边框
                    labelText: "账号"),
                controller: this.userName, //初始化的时候给表单赋值
              ),
              TextField(
                decoration: InputDecoration(
                  hintText: "请输入密码",
                ),
                // 监听文本框的值变化
                onChanged: (value) {
                  setState(() {
                    this.password = value;
                  });
                },
              ),
              SizedBox(height: 10),
              Checkbox(
                  value: this.flag,
                  activeColor: Colors.red, //选中颜色
                  onChanged: (value) {
                    setState(() {
                      this.flag = value;
                    });
                  }),
              // 多个复选框
              CheckboxListTile(
                  value: this.flag,
                  activeColor: Colors.red, //选中颜色
                  title: Text("标题"),
                  subtitle: Text("二级标题"),
                  secondary: Icon(Icons.help),
                  onChanged: (value) {
                    setState(() {
                      this.flag = value;
                    });
                  }),
              Divider(),
              Row(
                children: <Widget>[
                  Text("男"),
                  Radio(
                    value: 1,
                    onChanged: (value) {
                      setState(() {
                        this.sex = value;
                      });
                    },
                    groupValue: this.sex,
                  ),
                  Text("女"),
                  Radio(
                    value: 2,
                    onChanged: (value) {
                      setState(() {
                        this.sex = value;
                      });
                    },
                    groupValue: this.sex,
                  ),
                ],
              ),

              RadioListTile(
                value: 1,
                activeColor: Colors.red, //选中颜色
                title: Text("标题"),
                subtitle: Text("二级标题"),
                onChanged: (value) {
                  setState(() {
                    this.sex = value;
                  });
                },
                groupValue: this.sex,
              ),
              RadioListTile(
                value: 2,
                activeColor: Colors.red, //选中颜色
                title: Text("标题"),
                subtitle: Text("二级标题"),
                secondary: Image.network(
                    "http://sucai.suoluomei.cn/sucai_zs/images/20200226173152-1.jpg"),
                onChanged: (value) {
                  setState(() {
                    this.sex = value;
                  });
                },
                groupValue: this.sex,
              ),

              Switch(
                value: this.flag,
                onChanged: (value) {
                  setState(() {
                    this.flag = value;
                  });
                },
              ),
              Container(
                width: double.infinity,
                height: 50,
                child: RaisedButton(
                  color: Colors.blue,
                  textColor: Colors.white,
                  child: Text("登录"),
                  onPressed: () {
                    // 获取输入的值
                    print(this.password);
                  },
                ),
              )
            ],
          ),
        ));
  }
}

listview button gridview image stack

0 人点赞