Flutter 基础组件 Widgets 入门教程

Flutter 基础组件 Widgets 入门教程

Flutter 的核心是 Widgets，每一个 UI 元素都是一个 Widget。本教程将带你了解 Flutter 中常用的基础组件，并通过实例演示如何使用它们。

1. Text 文本组件

Text 组件用来显示文本，可以设置文本样式、颜色、对齐方式等。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Widget'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

代码解读:

• Text('Hello, Flutter!'): 创建一个 Text 组件，显示文本 “Hello, Flutter!”。
• style: TextStyle(...): 设置文本样式，包含字体大小、粗细、颜色等属性。

2. Image 图片组件

Image 组件用来显示图片，可以从网络、本地资源加载图片。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image Widget'),
        ),
        body: Center(
          child: Image.network(
            'https://picsum.photos/200/300',
            width: 200,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

代码解读:

• Image.network(...): 从网络加载图片。
• width 和 height: 设置图片的宽度和高度。
• fit: 设置图片的填充方式，BoxFit.cover 将图片缩放至充满整个容器。

3. Button 按钮组件

Button 组件用来响应用户点击事件，它可以是 FlatButton、RaisedButton、IconButton 等。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Widget'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              print('Button clicked!');
            },
            child: Text('Click Me!'),
          ),
        ),
      ),
    );
  }
}

代码解读:

• RaisedButton(...): 创建一个凸起的按钮。
• onPressed: 设置按钮点击事件回调函数，这里打印 “Button clicked!”。
• child: 设置按钮的显示内容。

4. Container 容器组件

Container 组件是一个通用容器，可以用来包裹其他 Widget，设置背景颜色、边框、尺寸等。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Container Widget'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            padding: EdgeInsets.all(16),
            child: Text(
              'Hello, World!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

代码解读:

• width 和 height: 设置容器的宽度和高度。
• color: 设置容器的背景颜色。
• padding: 设置容器内部边距。
• child: 设置容器内的子 Widget。

5. 其他常用组件

除了上述基础组件，Flutter 还提供许多其他常用组件，例如：

• Row 和 Column: 用来将多个 Widget 水平或垂直排列。
• Icon: 用来显示图标。
• AppBar: 用来创建应用的标题栏。
• Scaffold: 用来创建应用的基本结构。
• ListView: 用来创建列表。

总结

本教程介绍了 Flutter 中常用的基础组件，并通过实例演示了如何使用它们。通过学习这些组件，你可以构建出基本的 Flutter 应用程序。

更深入学习:

• Flutter 官方文档: https://flutter.dev/docs
• Flutter Cookbook: https://flutter.dev/docs/cookbook
• Flutter 中文网: https://flutterchina.club/

希望本教程对您有所帮助！