flutter 初始化后的基本页面框架

// 文件位置：C:\Users\dai51\StudioProjects\myflutter\lib\main.dart
import 'package:flutter/material.dart';
import 'basic/NavigationBar.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\NavigationBar.dart
import 'package:flutter/material.dart';
import 'Content.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: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Icon(Icons.search),
            ),
            Icon(Icons.more_vert),
          ],
          elevation: 0.0,
          centerTitle: true,
        ),
        body: const TextDemo(),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Color(0xFF336699),
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.white.withOpacity(.60),
          selectedFontSize: 14,
          unselectedFontSize: 14,
          onTap: (value) {
            // Respond to item press.
          },
          items: [
            BottomNavigationBarItem(
              title: Text('首页'),
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              title: Text('图表'),
              icon: Icon(Icons.equalizer),
            ),
            BottomNavigationBarItem(
              title: Text('修改'),
              icon: Icon(Icons.border_color),
            ),
            BottomNavigationBarItem(
              title: Text('账户'),
              icon: Icon(Icons.account_circle),
            ),
          ],
        ));
  }
}

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

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(
          "这是模拟的记账薄内容。",
          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: "Flutter简介：Flutter是Google开源的构建用户界面（UI）工具包", // 文本的内容
              style: TextStyle(
                // 文本样式
                fontSize: 30,
                color: Color(0xFF336699),
              ),
              children: [
                TextSpan(
                  text: "帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.blue,
                  ),
                ),
                TextSpan(
                  text: "Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.black45,
                  ),
                ),
              ]),
        ),
      ],
    );
  }
}

程序执行后的效果：