[toc]
第3节:Flutter的最基础知识
一、最基础知识
1、颜色
1 2
| Colors.transparent, Colors.black.withOpacity(0.4)
|
2、图片
1
| new Image.asset('images/goods_image.png', width: 30.0, height: 30.0,),
|
1、按钮形式
1 2 3 4 5 6 7 8 9
| floatingActionButton: new FloatingActionButton( tooltip: 'Add', child: new Icon(Icons.add), onPressed:() { goNextPage(context); } ), );
|
2、按钮的事件写法
2.1、无方法
1 2 3 4 5 6 7 8 9
| onPressed: null,
onPressed: () {}
onPressed: () => {}
|
2.2、有方法,但该方法无参数
1 2 3 4 5 6 7 8 9 10 11 12
| void printLog() { print("This is printLog Method"); }
onPressed: () { printLog(); },
onPressed: printLog,
|
2.3、有方法,且该方法有参数
1 2 3 4 5 6 7 8
| void printText($text) { print("The text is " + $text); }
onPressed:() { printText("Hello world"); }
|
五、页面的跳转 & 路由的管理
5.1 直接跳转
以跳转到上述建立的NewRoute.dart
为例,则跳转方法:
方式①:
1 2 3 4 5 6 7 8
| import 'NewRoute.dart';
onPressed: () { Navigator.push(context, new MaterialPageRoute(builder: (context) { return new NewRoute(); })); },
|
方式②:
1 2 3 4 5 6 7 8 9 10 11 12 13
| import 'NewRoute.dart';
void goNextPage(context) { Navigator.push(context, new MaterialPageRoute(builder: (context) { return new NewRoute(); })); }
onPressed:() { goNextPage(context); }
|
5.2 使用路由管理
1 2 3 4 5 6 7 8 9 10 11
| import 'NewRoute.dart';
routes: { "new_page": (context) => NewRoute(), },
onPressed: () { Navigator.pushNamed(context, "new_page"); },
|