Text(
'文本是视图系统中的常见控件，用来显示一段特定样式的字符串，就比如Android里的TextView，或是iOS中的UILabel。',
textAlign: TextAlign.center,//居中显示
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red),//20号红色粗体展示
);
TextStyle blackStyle = TextStyle(fontWeight: FontWeight.normal, fontSize: 20, color: Colors.black); //黑色样式
TextStyle redStyle = TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red); //红色样式
Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(text:'文本是视图系统中常见的控件，它用来显示一段特定样式的字符串，类似', style: redStyle), //第1个片段，红色样式
TextSpan(text:'Android', style: blackStyle), //第1个片段，黑色样式
TextSpan(text:'中的', style:redStyle), //第1个片段，红色样式
TextSpan(text:'TextView', style: blackStyle) //第1个片段，黑色样式
]),
textAlign: TextAlign.center,
);加载网络图片，如 Image.network('http://xxx/xxx/test.gif')
_imageState(Image这种控件肯定不是静态的撒,得需要一个State)刷新UI.FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif', //gif占位
image: 'https://xxx/xxx/xxx.jpg',
fit: BoxFit.cover, //图片拉伸模式
width: 200,
height: 200,
)图片默认缓存到内存,LRU(最近最少使用),如需缓存到本地则需要使用第三方的CachedNetworkImage(还提供了错误展示图片)控件
FloatingActionButton(onPressed: () => print('FloatingActionButton pressed'),child: Text('Btn'),);
FlatButton(onPressed: () => print('FlatButton pressed'),child: Text('Btn'),);
RaisedButton(onPressed: () => print('RaisedButton pressed'),child: Text('Btn'),);
FlatButton(
color: Colors.yellow, //设置背景色为黄色
shape:BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)), //设置斜角矩形边框
colorBrightness: Brightness.light, //确保文字按钮为深色
onPressed: () => print('FlatButton pressed'),
child: Row(children: <Widget>[Icon(Icons.add), Text("Add")],)
);Button都是由RawMaterialButton承载视觉，Image都是RawImage，Text是RichText。它们都继承自RenderObjectWidget，而RenderObjectWidget的父类就是Widget。
| 构造函数名 | 特点 | 适用场景 | 适用频次 |
|---|---|---|---|
| ListView | 一次性创建好全部子Widget | 适用于展示少量连续子Widget的场景 | 中 |
| ListView.builder | 提供子Widget创建方法,仅在需要展示的时候才创建 | 适用于子Widget较多,且视觉效果呈现某种规律性的场景 | 高 |
| ListView.separated | 与ListView.builder类似,并提供了自定义分割线的功能 | 与ListView.builder场景类似 | 中 |
ListView(
children: <Widget>[
//设置ListTile组件的标题与图标
ListTile(leading: Icon(Icons.map), title: Text('Map')),
ListTile(leading: Icon(Icons.mail), title: Text('Mail')),
ListTile(leading: Icon(Icons.message), title: Text('Message')),
]);ListView.builder(
//itemCount，表示列表项的数量，如果为空，则表示 ListView 为无限列表
itemCount: 100, //元素个数
itemExtent: 50.0, //列表项高度
itemBuilder: (BuildContext context, int index) => ListTile(title: Text("title $index"), subtitle: Text("body $index"))
);//使用ListView.separated设置分割线
ListView.separated(
itemCount: 100,
separatorBuilder: (BuildContext context, int index) => index %2 ==0? Divider(color: Colors.green) : Divider(color: Colors.red),//index为偶数，创建绿色分割线；index为奇数，则创建红色分割线
itemBuilder: (BuildContext context, int index) => ListTile(title: Text("title $index"), subtitle: Text("body $index"))//创建子Widget
)
CustomScrollView(
slivers: <Widget>[
SliverAppBar(//SliverAppBar作为头图控件
title: Text('CustomScrollView Demo'),//标题
floating: true,//设置悬浮样式
flexibleSpace: Image.network("https://xx.jpg",fit:BoxFit.cover),//设置悬浮头图背景
expandedHeight: 300,//头图控件高度
),
SliverList(//SliverList作为列表控件
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item #$index')),//列表项创建方法
childCount: 100,//列表元素个数
),
),
]);class MyControllerAppState extends State<MyControllerApp> {
//ListView控制器
ScrollController _controller;
//标识目前是否需要启用top按钮
bool isToTop = false;
@override
void initState() {
_controller = ScrollController();
_controller.addListener(() {
//ListView向下滚动1000 则启用top按钮
if (_controller.offset > 1000) {
setState(() {
isToTop = true;
});
} else if (_controller.offset < 300) {
//向下滚动不足300,则禁用按钮
setState(() {
isToTop = false;
});
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView.builder(
//将控制器传入
controller: _controller,
itemCount: 100,
itemExtent: 100,
itemBuilder: (context, index) =>
ListTile(title: Text('index $index'))),
floatingActionButton: RaisedButton(
//如果isToTop是true则滑动到顶部,否则禁用按钮
onPressed: isToTop
? () {
//滑动到顶部
_controller.animateTo(0.0,
duration: Duration(microseconds: 200),
curve: Curves.ease);
}
: null,
child: Text('top'),
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}class MyListenerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: NotificationListener<ScrollNotification>(
//添加NotificationListener作为父容器
//注册通知回调
onNotification: (scrollNotification) {
//开始滑动
if (scrollNotification is ScrollStartNotification) {
//scrollNotification.metrics.pixels 滑动的位置
print('scroll start ${scrollNotification.metrics.pixels}');
} else if (scrollNotification is ScrollUpdateNotification) {
//滑动中
print('scroll update');
} else if (scrollNotification is ScrollEndNotification) {
//滑动结束
print('scroll end');
}
return null;
},
child: ListView.builder(
itemCount: 100,
itemExtent: 70,
itemBuilder: (context, index) => ListTile(
title: Text('index $index'),
)),
),
),
);
}
}Copyright© 2013-2019