Flutter 锦囊集

最近在学习Flutter，总结了开发中常用的一些锦囊。

1、Text 组件可设置文本字体的颜色、字体的大小、斜体、字体的粗细

class Hello extends StatelessWidget {
  build(BuildContext context) {
    return Center(
      child: new Text(
        "NIHAO",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            color: Colors.yellow,//字体的颜色
            fontSize: 30.0,//字体的大小
            fontStyle: FontStyle.italic,//斜体
            fontWeight: FontWeight.w800),//字体的粗细
      ),
    );
  }
}

2、Flutter 去掉 DEBUG 标识
如图：

image.png

若想去除该DEBUG 标识，设置 debugShowCheckedModeBanner的值为 false 即可，该值默认为 True，代码如下所示：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Flutter",
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

3、小技巧集
小技巧：（1）应用场景：快速导入模块；
快捷键：Command + .

当我们的代码需要做模块化处理的时候，通常将不同模块的代码分别写到各自的.dart文件中。然后再分别在文件中导入需要的文件，如下所示：
文件一：main.dart

import 'package:flutter/material.dart';
import 'home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Flutter - Day15",
      home: MyHome(),
      debugShowCheckedModeBanner: false,
    );
  }
}

文件二：home.dart

import 'package:flutter/material.dart';

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter"),
        leading: new Icon(Icons.menu),
        actions: [new Icon(Icons.search)],
      ),
      body: new Center(
        child: new Text(
          "NIHAO",
          style: const TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              color: Colors.blue),
        ),
      ),
    );
  }
}

当main.dart文件需要引用到MyHome组件时，就需要将MyHome对应的项目名和包名导入到main.dart中

import 'home.dart';

若有大量的模块需要处理，此时每次手写导入的代码有些费劲，可利用快捷键: Command + . 快速完成导入。如下图所示：

image.png

当我们按下快捷键 Command + . 的时候，IDE会快速弹出该提示框，我们鼠标点击选择导入即可。

小技术（2）：应用场景：快速编写有状态或无状态组件的代码，节省编写代码的时间。
我们只需要在IDE输入 st，即可看到代码块的显示，如图所示：

image.png

如图，若我们需要快速编写无状态的组件，只需用鼠标选第二个，然后补上组件的名字即可，如下图所示:

image.png

4、Flutter 创建按钮
一般情况下，普通按钮具有title、点击事件、背景颜色，可能还会有圆角等，在 Flutter 中，一切皆为组件，可利用下面的代码实现普通按钮的创建：

new GestureDetector(
            onTap: () {
              print("MyButton was tapped! ");
            },
            child: Container(
              height: 36.0,
              width: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.symmetric(horizontal: 8.0),
              decoration: new BoxDecoration(
                  borderRadius: new BorderRadius.circular(5.0),
                  color: Colors.lightGreen[500]),
              child: new Center(child: new Text("登录")),
            ),
          )

5、在Flutter 中，StatefulWidget 管理 State，当我们需要在响应某个事件中更新UI，就需要在State组件中对应的事件里，去实现State的 setState() 方法，在setState()方法中去修改 与UI绑定的变量。Flutter会自动通知 UI去做相应的变化。代码如下：

import 'package:flutter/material.dart';
import 'MyState.dart';

class MyBody extends StatefulWidget {
  @override
  State createState() => MyState();
}

class MyState extends State {
  int _touchCount = 0;

  void pressed() {
    setState(() {
      _touchCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Row(
        children: [
          RaisedButton(
            onPressed: pressed,
            child: new Text("Increasement"),
          ),
          Text("_touchCount = $_touchCount"),
        ],
      ),
    );
  }
}