Flutter新项目主页加载显示自己的信息和样式设置包括图片和文字示例

[传奇开心果编程]

# 一、示例代码，验证运行效果截图为证

​
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // Center the content vertically
            children: <Widget>[
              Image.asset(
                'assets/logo.jpg',
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              const SizedBox(height: 20), // Add some space between the image and text
              Text(
                'Hello, 传奇开心果!',
                style: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                  fontSize: 32,
                ),
                textDirection: TextDirection.ltr,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

​

# 二、解释说明

这段代码是一个 Flutter 应用程序的基本结构示例代码。它已经添加了主页显示作者个人信息的功能。也添加了样式设置。

以下是代码的逐行解释：

1. **导入 Flutter 库**：
   ```dart
   import 'package:flutter/material.dart';
   ```
   这行代码导入了 Flutter 的 Material 设计库，使得可以使用 Flutter 的核心组件与功能。

2. **主函数**：
   ```dart
   void main() => runApp(const MyApp());
   ```
   `main` 函数是 Dart 应用程序的入口点。`runApp` 函数接受一个小部件作为参数，并启动应用。这里的 `MyApp` 是我们自定义的主小部件。

3. **MyApp 类**：
   ```dart
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   ```
   `MyApp` 继承自 `StatelessWidget`，表示它是一个无状态的小部件，也就是说它的属性在运行时不会改变。构造函数中可以接受一个可选的 `Key` 参数。

4. **构建方法**：
   ```dart
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               // 这里是内容
             ],
           ),
         ),
       ),
     );
   }
   ```
   在 `build` 方法中，返回了一个 `MaterialApp` 组件，这是采用 Material Design 的应用程序的基本构建块。`home` 属性表示主界面，这里使用了 `Scaffold` 组件，它提供了基本的视觉布局结构。

5. **Center 和 Column**：
   ```dart
   body: Center(
       child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             // ... 
           ],
       ),
   ),
   ```
   `Center` 组件使其子组件在屏幕上居中显示。`Column` 组件允许在垂直方向上排列多个子组件。

6. **Image.asset**：
   ```dart
   Image.asset(
     'assets/logo.jpg',
     width: 100,
     height: 100,
     fit: BoxFit.cover,
   ),
   ```
   这一部分加载了一个本地资产图片，文件路径是 `assets/logo.jpg`，并设置了它的宽高为 100 像素，`fit` 属性为 `BoxFit.cover`，保证图片填满指定区域。

7. **SizedBox**：
   ```dart
   const SizedBox(height: 20),
   ```
   `SizedBox` 组件用于在图片和文本之间增加 20 像素的垂直间距。

8. **Text 组件**：
   ```dart
   Text(
     'Hello, 传奇开心果!',
     style: TextStyle(
       color: Colors.red,
       fontWeight: FontWeight.bold,
       fontSize: 32,
     ),
     textDirection: TextDirection.ltr,
   ),
   ```
   `Text` 组件用于显示字符串“Hello, 传奇开心果!”。通过 `TextStyle` 控制文本的样式，包括颜色（红色）、粗体以及字体大小（32 像素）。`textDirection` 属性设置文本方向为从左到右。

综合来说，这段代码构建了一个简单的 Flutter 应用，显示一个图片和一段文本，所有内容居中排列。