Flutter组件随笔练习
时间:2022-07-24
本文章向大家介绍Flutter组件随笔练习，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
Container组件
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组件
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组件
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组件
// 自定义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组件
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组件
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组件
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组件
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组件
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组件
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表单组件
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);
},
),
)
],
),
));
}
}
- 日志分析实战之清洗日志小实例4：统计网站相关信息
- PHP-数组排序
- hdu---(3555)Bomb(数位dp（入门）)
- PHP-循环
- 日志分析实战之清洗日志小实例3：如何在spark shell中导入自定义包
- PHP-函数
- hdu----（5045）Contest（数位dp）
- hdu----（5053）the Sum of Cube（签到题，水体）
- RHEL构建DNS服务器-多区域
- hdu----(5050)Divided Land(二进制求最大公约数)
- 日志分析实战之清洗日志小实例1：使用spark&Scala分析Apache日志
- RHEL构建DNS服务器-单区域
- hdu----(5047)Sawtooth(大数相乘+数学推导)
- hdu----(4522)湫湫系列故事——过年回家(最短路)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Js递归
- scrollReveal实现网页重复动画效果
- ElementUI实现Upload文件上传服务器交互
- swiper.animate实现轮播展示动画效果
- 微信小程序子组件向父组件传值
- Css文字环绕圆形图片
- 微信小程序处理图片加载失败显示默认图片
- Dart环境配置和运行
- 微信小程序之间跳转及传参
- Spring源码学习笔记(2)——Bean的加载
- Css实现聊天框
- 机器学习之KNN原理与代码实现
- Dart常用的数据类型
- Vue版本更新清除浏览器缓存
- maven：Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenC