1.TextWidget文本组件
- 常用属性，
Style属性的用法，让文本漂亮起来
1.
TextAlign文本对齐属性
2.maxLines文本显示的最大行数
3.overflow控制文本的溢出效果
// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
body: const Center(
child: Text(
'你见过登山者吗?在湿滑的山路上,滑倒不能阻止他们向 上;你见过航海家吗?在波涛汹涌的海面上,即使风再大浪再高, 也无法阻挡他们奋勇向前,这就是坚强而又勇敢的勇气。',
textAlign: TextAlign.left,
// maxLines: 2, // 显示两行
// overflow: TextOverflow.ellipsis, // 文本末尾``...``效果
style: TextStyle(
fontSize: 25, //字体大小
color: Color.fromARGB(255, 255, 125, 125), // 字体色值
decoration: TextDecoration.underline, // 字体下划线
decorationStyle: TextDecorationStyle.solid, // 下划线为实线
),
),
),
),
);
}
}
2.Container容器组件
1.
alignment属性
2.设置宽高和颜色
3.padding内边距属性
4.margin外边距属性
5.decoration属性制作彩色背景
-
padding内边距属性-
EdegeInsets.all()统一设置 -
EdgeInsets.fromLTRB(left,top,right,borrom)设置左边、上边、右边、下边间距
-
-
decoration属性-
BoxDecoration Widget使用 -
LinearGradient设置背景颜色渐变
-
// ignore_for_file: avoid_unnecessary_containers
// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
body: Center(
child: Container(
child: const Text(
'Hello wo!',
style: TextStyle(
fontSize: 40.0,
),
),
// Container 对齐方式 有8种
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
// 这个属性影响渐变效果，所有注释
// color: Colors.lightBlue,
// 内边距理解为 容器 和 child(内容)之间的间距
// padding: const EdgeInsets.all(10.0),
// fromLTRB 指 左边、顶部、右边、底部的间距
padding: const EdgeInsets.fromLTRB(20.0, 30.0, 0.0, 0.0),
// 外边距理解为 容器 和 外部视图之间间距
margin: const EdgeInsets.all(20.0),
// 设置渐变，通过盒子修饰器
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purpleAccent
])),
)),
),
);
}
}
3.imageWidget图片组件
1.
Image Widget的几种加入形式
2.Fit属性（图片和容器之间的关系，如BoxFit.fill是充满整个容器）
3.图片的混合模式
4.Repeat属性让图片重复
-
Image Widget的几种加入形式-
Image.asset加载资源图片，会使打包时包体过大 -
Image.network网络资源图片，经常换的或者动态的图片 -
Image.file本地图片，比如相机照相后的图片预览 -
Image.memory加载到内存中的图片，Uint8List
-
// ignore_for_file: avoid_unnecessary_containers
// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
body: Center(
child: Container(
// 网络图片
child: Image.network(
'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
// 缩放比例
scale: 1.5,
// 图片和容器之间的关系
// fill充满容器 等7中方式
// fit: BoxFit.fill,
// 图片和颜色的混合模式 等20几种模式
// color: Colors.greenAccent,
// colorBlendMode: BlendMode.difference,
// 图片重复显示
// repeatX 横向重复、repeatY 纵向重复、noRepeat 不重复、repeat 横纵向都重复
repeat: ImageRepeat.repeat,
),
color: Colors.lightBlue,
width: 400.0,
height: 300.0,
),
),
),
);
}
}
4.ListViewWidget列表组件
1.
ListView组件的语法
2.ListTitle的使用
// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors
// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
body: ListView(
// ignore: prefer_const_literals_to_create_immutables
children: [
// 右边图片、中间文本为每行的内容
// ListTile(
// leading: Icon(Icons.access_alarm_sharp),
// title: Text('access_alarm_sharp'),
// ),
// ListTile(
// leading: Icon(Icons.access_time_filled_rounded),
// title: Text('access_alarm_sharp'),
// ),
// ListTile(
// leading: Icon(Icons.account_balance_sharp),
// title: Text('access_alarm_sharp'),
// ),
// 网络图片为每行的内容
Image.network(
'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
),
Image.network(
'https://img3.sycdn.imooc.com/5cce8be1088dd62806000338-360-202.jpg',
),
Image.network(
'https://img2.sycdn.imooc.com/5a2f4d7f00012c8106000338-360-202.jpg',
),
],
),
),
);
}
}
5.横向列表和自定义组件
1.
scrollDirection属性滚动方向，Axis.horizontal 为横向滚动，Axis.vertical 为纵向滚动
// 引入基础样式库，设计扁平化，谷歌推出的
// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
// ignore: sized_box_for_whitespace
body: Container(
height: 200.0,
child: MyList(),
),
),
);
}
}
class MyList extends StatelessWidget {
const MyList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// ignore: todo
// TODO: implement build
return ListView(
// 设置滚动方向，Axis.horizontal 为横向滚动，Axis.vertical 为纵向滚动
scrollDirection: Axis.horizontal,
children: [
// 右边图片、中间文本为每行的内容
// ListTile(
// leading: Icon(Icons.access_alarm_sharp),
// title: Text('access_alarm_sharp'),
// ),
// ListTile(
// leading: Icon(Icons.access_time_filled_rounded),
// title: Text('access_alarm_sharp'),
// ),
// ListTile(
// leading: Icon(Icons.account_balance_sharp),
// title: Text('access_alarm_sharp'),
// ),
// 网络图片为每行的内容
Image.network(
'https://img1.sycdn.imooc.com/szimg/5c7e6835087ef3d806000338-360-202.jpg',
),
Image.network(
'https://img3.sycdn.imooc.com/5cce8be1088dd62806000338-360-202.jpg',
),
Image.network(
'https://img2.sycdn.imooc.com/5a2f4d7f00012c8106000338-360-202.jpg',
),
],
);
}
}
6.动态列表
1.传参和接收参数书写
2.实现动态列表ListView.builder(itemCount:列表的item个数, itemBuilder:该参数为一个方法，需要 return 一个Widget)
// ignore_for_file: avoid_unnecessary_containers, prefer_const_constructors
// 引入基础样式库，设计扁平化，谷歌推出的
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
// 传参，构造list数据，使用方法generate(列表长度，一个方法)
items: List<String>.generate(1000, (index) => 'Item $index'),
));
class MyApp extends StatelessWidget {
// 存放外界传入的数据
final List<String> items;
// 覆写构造方法，作用于传参，
// required 修饰为必传项
// : 符号后为调用父类构造方法
// ignore: prefer_const_constructors_in_immutables
MyApp({Key? key, required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
// ignore: sized_box_for_whitespace
body: ListView.builder(
// 列表的item个数
itemCount: items.length,
// 该参数为一个方法，需要 return 一个Widget，这边可以通过index判断，写不同的widget
itemBuilder: (context, index) {
return ListTile(
// ignore: unnecessary_string_interpolations
title: Text(items[index]),
);
},
),
),
);
}
}
