前端开发_6-Flutter学习总结
前言
一、Text
Text Text(
String data, //文本
{Key? key,
TextStyle? style,//文本样式
StrutStyle? strutStyle,
TextAlign? textAlign,//文本对齐方式
TextDirection? textDirection,//文本方向
Locale? locale,
bool? softWrap,
TextOverflow? overflow,//文本溢出样式
double? textScaleFactor,//文本比例
int? maxLines,//最大行
String? semanticsLabel,//语义标签
TextWidthBasis? textWidthBasis,
TextHeightBehavior? textHeightBehavior,
})
//style的属性
(const) TextStyle TextStyle({
bool inherit = true,//若为false,则样式为白色，字体大小为10像素，无衬线字体
Color? color,//字体颜色
Color? backgroundColor,//字体背景颜色
double? fontSize,//字体大小
FontWeight? fontWeight,//字体粗细
FontStyle? fontStyle,//字体样式（斜体，等等）
double? letterSpacing,//字母间隔
double? wordSpacing,
TextBaseline? textBaseline,
double? height,
TextLeadingDistribution? leadingDistribution,
Locale? locale,
Paint? foreground,
Paint? background,
List<Shadow>? shadows,
List<FontFeature>? fontFeatures,
TextDecoration? decoration,
Color? decorationColor,//下划线颜色
TextDecorationStyle? decorationStyle,
double? decorationThickness,
String? debugLabel,
String? fontFamily,
List<String>? fontFamilyFallbfack,
String? package,
TextOverflow? overflow,//文本溢出样式
})
二、Container
(new) Container Container({
Key? key,
AlignmentGeometry? alignment,//内容位置
EdgeInsetsGeometry? padding,
Color? color,
Decoration? decoration,//边框样式
Decoration? foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
EdgeInsetsGeometry? margin,
Matrix4? transform,//移动矩阵
AlignmentGeometry? transformAlignment,
Widget? child,//组件
Clip clipBehavior = Clip.none,
})
(new) BoxDecoration BoxDecoration({
Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape = BoxShape.rectangle,
})
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.red, width: 2.0),
borderRadius: const BorderRadius.all(
// Radius.circular(150), //圆形
Radius.circular(10),
)),
三、Image
(new) Image Image.network(
String src, {
Key? key,
double scale = 1.0,
Widget Function(BuildContext, Widget, int?, bool)? frameBuilder,
Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
Widget Function(BuildContext, Object, StackTrace?)? errorBuilder,
String? semanticLabel,
bool excludeFromSemantics = false,
double? width,
double? height,
Color? color,
Animation<double>? opacity,
BlendMode? colorBlendMode,
BoxFit? fit,
AlignmentGeometry alignment = Alignment.center,
ImageRepeat repeat = ImageRepeat.noRepeat,
Rect? centerSlice,
bool matchTextDirection = false,
bool gaplessPlayback = false,
FilterQuality filterQuality = FilterQuality.low,
bool isAntiAlias = false,
Map<String, String>? headers,
int? cacheWidth,
int? cacheHeight,
})
Center(
child: Container(
height: 300,
width: 300,
child: Image.network(
'https://profile.csdnimg.cn/F/7/3/3_joyyi9',
fit: BoxFit.cover,
)),
);
//圆形图片
(new) BoxDecoration BoxDecoration({
Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape = BoxShape.rectangle,
})
Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.yellow,
// borderRadius: BorderRadius.all(
// Radius.circular(150),
// )
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: NetworkImage("https://profile.csdnimg.cn/F/7/3/3_joyyi9"),
fit: BoxFit.cover)),
));
三、ListView
(new) ListView ListView({
Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
double? itemExtent,
Widget? prototypeItem,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge,
})
(new) ListView ListView.builder({
Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
double? itemExtent,
Widget? prototypeItem,
required Widget Function(BuildContext, int) itemBuilder,
int? itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge,
})
ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: 180.0,
color: Colors.red,
),
Container(
height: 180.0,
color: Colors.orange,
),
Container(
height: 180.0,
color: Colors.blue,
),
Container(
height: 180.0,
color: Colors.deepOrange,
),
Container(
height: 180.0,
color: Colors.deepPurpleAccent,
),
],
),
ListView(
padding: const EdgeInsets.all(10),
children: const <Widget>[
ListTile(
leading:Icon(Icons.settings,size:40),
title: Text('华北黄淮高温雨今起强势登场'),
subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
),
ListTile(
title: Text('华北黄淮高温雨今起强势登场'),
subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
trailing:Icon(Icons.home),
),
ListTile(
leading:Image.network("https://profile.csdnimg.cn/F/7/3/3_joyyi9"),
title: Text('华北黄淮高温雨今起强势登场'),
subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
),
],
)
Image.network("https://www.itying.com/images/flutter/1.png"),
Container(
child: Text(
'我是一个标题',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 28,
),
),
height: 60,
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
),
listview动态传入
listData .dart
List listData = [
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/1.png',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://www.itying.com/images/flutter/2.png',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://www.itying.com/images/flutter/3.png',
},
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/4.png',
},
{
"title": 'Tornado',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/5.png',
},
{
"title": 'Undo',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/6.png',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
}
];
Widget _getListData(context,index){
return ListTile(
title: Text(listData[index]["title"]),
leading:Image.network(listData[index]["imageUrl"]),
subtitle:Text(listData[index]["author"])
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:listData.length,
itemBuilder:this._getListData
);
}
///-----------------------------
//自定义方法
List<Widget> _getData(){
return [
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
),
ListTile(
title: Text("我是一个列表"),
)
];
}
//自定义方法
List<Widget> _getData(){
List<Widget> list=[];
for(var i=0;i<20;i++){
list.add(ListTile(
title: Text("我是$i列表"),
));
}
return list;
}
//自定义方法
List<Widget> _getData(){
var tempList=listData.map((value){
return ListTile(
leading:Image.network(value["imageUrl"]),
title:Text(value["title"]),
subtitle:Text(value["author"])
);
});
// ('124124','124214')
return tempList.toList();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: this._getData(),
);
}
///-----------------------------
List list=[];
HomeContent(){
for(var i=0;i<20;i++){
this.list.add('我是第$i条');
}
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:this.list.length,
itemBuilder:(context,index){
return ListTile(
title: Text(this.list[index]),
);
}
);
}
//自定义方法
Widget _getListData(context,index){
return ListTile(
title: Text(listData[index]["title"]),
leading:Image.network(listData[index]["imageUrl"]),
subtitle:Text(listData[index]["author"])
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:listData.length,
itemBuilder:this._getListData
);
}
}
四、GridView
new) GridView GridView.builder({
Key? key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required SliverGridDelegate gridDelegate,
required Widget Function(BuildContext, int) itemBuilder,
int? itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge,
})
Widget _getListData(context, index) {
return Container(
child: Column(
children: <Widget>[
Image.network(listData[index]['imageUrl']),
SizedBox(height: 12),
Text(
listData[index]['title'],
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10),
)
],
),
decoration: BoxDecoration(
border:
Border.all(color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
// height: 400, //设置高度没有反应
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
//注意
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10.0, //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
crossAxisCount: 2, //一行的 Widget 数量
),
itemCount: listData.length,
itemBuilder: this._getListData,
);
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 4, //一行的 Widget 数量
children: const <Widget>[
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本'),
Text('这是一个文本')
],
);
}
List<Widget> _getListData() {
List<Widget> list = [];
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Text(
'这是第$i条数据',
style: TextStyle(color: Colors.white, fontSize: 20),
),
color: Colors.red,
// height: 400, //设置高度没有反应
));
}
return list;
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 20.0, //水平子 Widget 之间间距
mainAxisSpacing: 20.0, //垂直子 Widget 之间间距
padding: EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
childAspectRatio: 0.7, //宽度和高度的比例
children: this._getListData(),
);
}
List<Widget> _getListData() {
var tempList=listData.map((value){
return Container(
child:Column(
children: <Widget>[
Image.network(value['imageUrl']),
SizedBox(height: 12),
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
)
),
// height: 400, //设置高度没有反应
);
});
// ('xxx','xxx')
return tempList.toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing:10.0 , //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
padding: EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
// childAspectRatio:0.7, //宽度和高度的比例
children: this._getListData(),
);
}
总结
赶快加大进度！
