Flutter常用组件的介绍与总结

 前言：

        在学习Flutter的时候牢记一句话，即是“万物皆组件”，一个Text也是组件。

 

一.MaterialApp 组件  （一般作为顶级widget）

         MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget，一般作为顶层 widget 使用。

常用的属性:

home(主页)     -----------------------------设置主页样式                               

title(标题)        -----------------------------设置标题

color(颜色)

theme(主题)

routes(路由)      -----------------------------设置跳转

...

二.Scaffold组件

      Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

常用的属性:

appBar ----------------------------------- 显示在界面顶部的一个 AppBar

body -------------------------------------- 当前界面所显示的主要内容 Widget

drawer ------------------------------------ 抽屉菜单控件
...

 

如：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
        //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "I am a demo",
        style: TextStyle(
            fontSize: 15, fontWeight: FontWeight.bold, color: Colors.black),
      ),
    );
  }
}

 效果：