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, // appBar 组件的阴影高度
          centerTitle: true, // title 文字内容是否置中？
        ),
        body: const TextDemo(),

        // 底部导航菜单
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed, // 相当于 css 的 position: 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,
                  ),
                ),
              ]),
        ),
      ],
    );
  }
}

程序执行后的效果：