[toc]

第3节：Flutter的最基础知识

一、最基础知识

1、颜色

• Flutter 移动应用开发 #4：颜色

Colors.transparent,  //透明色
Colors.black.withOpacity(0.4)

2、图片

new Image.asset('images/goods_image.png', width: 30.0, height: 30.0,),

三、按钮Button

1、按钮形式

floatingActionButton: new FloatingActionButton(
         tooltip: 'Add', // used by assistive technologies
         child: new Icon(Icons.add),
         // 点击进行页面跳转
         onPressed:() {
           goNextPage(context);
         }
         ),
   );

2、按钮的事件写法

2.1、无方法

// 写法①
onPressed: null,

// 写法②：推荐
onPressed: () {}

// 写法③：不推荐
onPressed: () => {}
// 缺点：只能直接retrun返回值，不能写多行

2.2、有方法，但该方法无参数

// 设方法为：
void printLog() {
  print("This is printLog Method");
}

// 则按钮点击事件有两种写法：
// 写法①：常见的写法
onPressed: () {
    printLog();
},
// 写法②：简写
onPressed: printLog,

2.3、有方法，且该方法有参数

//设方法为：
void printText($text) {
  print("The text is " + $text);
}
//则按钮点击事件为：
onPressed:() {
	printText("Hello world");
}

五、页面的跳转 & 路由的管理

5.1 直接跳转

以跳转到上述建立的NewRoute.dart为例，则跳转方法：

方式①：

import 'NewRoute.dart';

// 按钮处的写法
onPressed: () {
    Navigator.push(context, new MaterialPageRoute(builder: (context) {
        return new NewRoute();
    }));
},

方式②：

import 'NewRoute.dart';

// 定义导航到新路由的方法
void goNextPage(context) {
  Navigator.push(context, new MaterialPageRoute(builder: (context) {
    return new NewRoute();
  }));
}

// 则按钮处的写法，自然如下：
onPressed:() {
    goNextPage(context);
}

5.2 使用路由管理

import 'NewRoute.dart';

// 在MaterialApp中注册路由表
routes: {
    "new_page": (context) => NewRoute(),
},

// 按钮位置写法
onPressed: () {
    Navigator.pushNamed(context, "new_page");
},