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

优质创作者: python技术领域

2024-10-11 11:50:30

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


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 应用，显示一个图片和一段文本，所有内容居中排列。

...全文