flutter:定义组件 模块化

0. 创建组件

快捷指令 importm
vs快捷指令 stless

import 'package:flutter/material.dart'; // 基础包

void main() {
  // 入口函数（void定义不会返回）
  runApp(Hello());
}

// 定义组件
class Hello extends StatelessWidget {
  build(BuildContext context) {
    return Center(
        child: Text(
      'nihao hello world',
      textDirection: TextDirection.ltr,
      style: TextStyle(
          color: Colors.yellow,
          fontSize: 22,
          fontWeight: FontWeight.w500,
          fontStyle: FontStyle.italic),
    ));
  }
}

1. MaterialApp

1. MaterialApp是入口Widget。类比成为网页中的html，且它自带路由、主题色，

class App extends StatelessWidget {
  Widget build(BuildContext context) {
// 
    throw MaterialApp(
        title: 'Flutter',
        home: Hello()
        );
  }
}

2. Scaffold

2. Scaffold通常被用作MaterialApp的子Widget。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Home(),
      debugShowCheckedModeBanner: false, // 去掉测试版本的Demo这个标签
    );
  }
}

appBar属性

Draw属性

示例

3. 页面 （按钮leading actions）

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
          elevation: 20.0, // 下部的影子，该值越大，影子越清楚，为0时，不会有影子，和RaisedButton是一样的
          // 设置导航栏颜色 , backgroundColor: PrimaryColor
          leading: Icon(Icons.menu), // 左侧图标
          actions: <Widget>[
            // 右侧图标actions，可以接收多个图标
            Icon(Icons.search),
            Icon(Icons.send),
          ],
        ),
        // 设置主体颜色 backgroundColor: Colors.red,
        body: Hello());
  }
}

4. 模块化

1. 定义组件

// home.dart
import 'package:flutter/material.dart'; // 基础包

// 定义组件
class Hello extends StatelessWidget {
  build(BuildContext context) {
    return Center(
        child: Text(
      'nihao hello world',
      textDirection: TextDirection.ltr,
      style: TextStyle(
          color: Colors.yellow,
          fontSize: 22,
          fontWeight: FontWeight.w500,
          fontStyle: FontStyle.italic),
    ));
  }
}

2. 导入组件
   vscode快捷指令在文字上右键点击可以导入包

import 'hello.dart'; // 基础包