首先我先来介绍一哈Icon
Icon就是图标,Flutter有丰富的Icon库,提供了常用的Icon供开发者选择
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(//title之前是leading
icon: new Icon(Icons.menu),
tooltip: '导航菜单',
onPressed: null,
),
title: new Text('The word of AppBar'),
actions: <Widget>[//title之后是actions
new IconButton(
icon: new Icon(Icons.search),
tooltip: '搜索',
onPressed: null,
),
],
),
body: new Center(
child: new Text('你好,世界!'),
),
floatingActionButton: new FloatingActionButton(//浮动的按钮,意思是可以在屏幕中拖动
tooltip: '增加',
child: new Icon(Icons.add),
onPressed: null,
),
);
}
}
这个AppBar的菜单按钮和搜索按钮就是用的Flutter标准图标库
下面我们来看看ListView的使用叭
先来试试图标+描述列表
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: '追风者从不认输',
home: Scaffold(
appBar: new AppBar(
title: new Text('roadkiller'),
),
body: new ListView(//这个东西后面贼有用
children: <Widget>[//这是一个数组,因为列表就是可以装很多组件啊,注意是children:
new ListTile(
leading: new Icon(Icons.add_shopping_cart),
title: new Text('add_shopping_cart'),
),
new ListTile(
leading: new Icon(Icons.camera_enhance),
title: new Text('camera_enhance'),
),
new ListTile(
leading: new Icon(Icons.restore),
title: new Text('restore'),
),
],
)
),
);
}
}
下面我们来试试图片列表叭
搞一个纵向列表,横向列表是同理的
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: '追风者从不认输',
home: Scaffold(
appBar: new AppBar(
title: new Text('roadkiller'),
),
body:Center(
child: Container(
width: 200.0,
child: new ListView(
scrollDirection: Axis.vertical,//列表方式是竖直的,水平的话可以写horizontal
children: <Widget>[
new Container(
height: 180.0,
color: Colors.lightBlueAccent,
),
new Container(
height: 180.0,
color: Colors.amber,
),
new Container(
height: 180.0,
color: Colors.deepOrangeAccent,
),
new Container(
height: 180.0,
color: Colors.purpleAccent,
),
],
),
),
),
),
);
}
}
有没有发现上面的嵌套巨巨巨恶心!
不要慌,我来用用之前学过的Java的继承来减少嵌套
等价代码如下
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: '追风者从不认输',
home: Scaffold(
appBar: new AppBar(
title: new Text('roadkiller'),
),
body:Center(
child: Container(
width: 200.0,
child: MyList(),
),
),
),
);
}
}//嵌套少一些了
class MyList extends StatelessWidget{//可以单独把ListView组件写一个类,其实以后无论什么组件都可以的
@override
Widget build(BuildContext context)
{
return ListView(//返回类型写对
scrollDirection: Axis.vertical,//这句话好好理解
children: <Widget>[
new Container(
height: 180.0,
color: Colors.lightBlueAccent,
),
new Container(
height: 180.0,
color: Colors.amber,
),
new Container(
height: 180.0,
color: Colors.deepOrangeAccent,
),
new Container(
height: 180.0,
color: Colors.purpleAccent,
),
],
);
}
}
这个其实是可以拖动的,我自己在电脑上虚拟机拖动挺流畅的,也说明了Flutter这个东西确实不错
下面是动态列表
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
items:new List<String>.generate(100, (i)=>'第${i}个标题')
));
class MyApp extends StatelessWidget
{
final List<String>items;
MyApp({Key key,@required this.items}):super(key:key);//这儿不熟悉Dart语法还真的不好理解,我也是,@required就是表示这是一个必需参数
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'roadkiller',
home: Scaffold(
appBar: new AppBar(
title: new Text('roadkiller'),
),
body:new ListView.builder(
itemCount: items.length,
itemBuilder: (context,index){
return new ListTile(
title: new Text('${items[index]}'),
);
},
)
),
);
}
}
可以滑到底端,最后是第99个,符合我们设定的共100个String类型的ListView