Flutter 初始化项目的 App 结构

• MaterialApp：flutter 的顶级组件

        1.title：应用在任务管理器中的标题；

        2.home：应用程序的主内容

        3.debugShowCheckedModeBanner：应用是否显示主上角调试标记

• Scaffold：脚手架组件

        1.appBar：应用程序的头部组件；

        2.body：应用的主体组件；

        3.floatingActionButton：浮动按钮的组件；

        4.drawer：主侧抽屉菜单的组件；

        5.endDrawer：右侧抽屉菜单的组件

示意图：

 具体代码所示（主要展示文本组件）：

// 文件位置：C:\Users\dai51\StudioProjects\myflutter\lib\main.dart
import 'package:flutter/material.dart';
//import 'basic/body1.dart';
import 'basic/Text.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',  // 在资源管理器显示的名称
      home: Home(),           // 应用程序的内容
      debugShowCheckedModeBanner: false,  // 右上角是否显示调试标志
    );
  }
}

// 文件位置：C:\Users\dai51\StudioProjects\myflutter\lib\basic\Text.dart
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("文本"),
        leading: Icon(Icons.menu),
        actions: [Icon(Icons.settings)],
        elevation: 0.0,    // appBar 组件的阴影高度
        centerTitle: true, // title 文字内容是否置中？
      ),
      body: const TextDemo(),
    );
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      // ignore: prefer_const_literals_to_create_immutables
      children: [
        const Text(
          "在不同路由（或界面）之间进行切换的时候，许多设计语言，例如 Material 设计，都定义了一些标准行为。",
          textDirection: TextDirection.ltr, // 文本显示的方向：从左到右
          style: TextStyle(
            // 文本样式，相当于 css 的 style
            fontSize: 30, // 字体的大小
            color: Colors.red, // 字体的颜色
            fontWeight: FontWeight.w500, // 字体的粗细
            fontStyle: FontStyle.italic, // 字体倾斜
            decoration: TextDecoration.lineThrough, // 字体删除线
            decorationColor: Colors.blue, // 字体删除线的颜色
          ),
          textAlign: TextAlign.left, // 文字显示的位置
          maxLines: 3, // 最大显示的行数
          overflow: TextOverflow.ellipsis, // 文本溢出后显示三个点 ...
          textScaleFactor: 1, // 字体放大的倍数
        ),
        RichText(
          // 多信息内容的文本
          text: TextSpan(
              // 文本的容器，相当于 html 的 <span></span>
              text: "hello", // 文本的内容
              style: TextStyle(
                // 文本样式
                fontSize: 40,
                color: Colors.red,
              ),
              children: [
                TextSpan(
                  text: "flutter",
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.blue,
                  ),
                ),
                TextSpan(
                  text: "你好世界！",
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.black45,
                  ),
                ),
              ]),
        ),
      ],
    );
  }
}

程序执行后的效果：

Flutter 中文网提供了在线书籍，学习 Flutter 不需要买书学习，传送门：

Summary | 《Flutter实战·第二版》- Preview (flutterchina.club)https://book.flutterchina.club/