First

概述

介绍第一次开发 flutter 应用需要了解的基础知识

页面结构

采用 Material 风格，所以 app 最外层使用 MaterialApp 包裹，最主要属性 home 用于设置页面组件，最常用的官方提供的页面组件是 Scaffold ，其中属性 body 为主要显示区域，一般可通过包裹 Container 容器组件，为以后扩展提供方便。例如属性 bottomNavigationBar，可以直接使用官方组件 BottomNavigationBar，但是为了以后扩展的方便，在外面包裹了一层 Container

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: 'MyFirstWebFlutter',
    theme: ThemeData(
      scaffoldBackgroundColor: Colors.blue,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('MyFirstWebFlutter'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World!', style: TextStyle(fontSize: 24, color: Colors.white),),
        ),
      ),
      bottomNavigationBar: Container(
        height: 60,
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          ],
        ),
      ),
    ),
  ));
}

创建页面的方法

上面 页面结构 中在 main 方法中直接写在 runApp 中制作 app 的方法，可以调整为调用一个本地变量的方法

import 'package:flutter/material.dart';

void main(List<String> args) {
  var materialApp = MaterialApp(
    title: 'MyFirstWebFlutter',
    theme: ThemeData(
      scaffoldBackgroundColor: Colors.blue,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('MyFirstWebFlutter'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World!', style: TextStyle(fontSize: 24, color: Colors.white),),
        ),
      ),
      // 不考虑扩展性的话，可以去掉外面包裹的 Container
      bottomNavigationBar: Container(
        height: 60,
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          ],
        ),
      ),
    ),
  );
  // 调用上面重构的本地变量 app
  runApp(materialApp);
}

或者将本地变量的方式更换为自定义类的方法（实现无状态组件，并返回 app）

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyFirstWebFlutter',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyFirstWebFlutter'),
        ),
        body: Container(
          child: Center(
            child: Text('Hello World!', style: TextStyle(fontSize: 24, color: Colors.white),),
          ),
        ),
        // 不考虑扩展性的话，可以去掉外面包裹的 Container
        bottomNavigationBar: Container(
          height: 60,
          child: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
              BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
              BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
            ],
          ),
        ),
      ),
    );
  }
}

下面是创建有状态的组件作为主页，可以看出 main 函数要求返回一个 app ，而有状态组件 MainPage 返回的是 Scaffold，该对象需要赋值给 MaterialApp 的 home 属性，而不能直接将 Scaffold 作为 runApp 的参数。相反的，如果 MainPage 的返回值，即 _MainPageState 的返回值不是 Scaffold 而是 MaterialApp，则在 main 函数中可以直接作为 runApp 的参数

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: 'MyFirstWebFlutter',
    theme: ThemeData(
      scaffoldBackgroundColor: Colors.blue,
    ),
    home: MainPage(),
  ));
}

class MainPage extends StatefulWidget {
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyFirstWebFlutter'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World!', style: TextStyle(fontSize: 24, color: Colors.white),),
        ),
      ),
      // 不考虑扩展性的话，可以去掉外面包裹的 Container
      bottomNavigationBar: Container(
        height: 60,
        child: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
            BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          ],
        ),
      ),
    );
  }
}

调试

• 通过函数 print() 打印调试信息