第4章：Widget基础

简要说明

在Flutter中，Widget是构建用户界面的基本单元。无论是简单的文本、图片，还是复杂的布局和动画，都是由Widget组成的。Flutter的UI框架是声明式的，这意味着你通过组合和配置Widget来构建界面，而不是直接操作UI元素。本章将介绍Flutter的核心概念——Widget，并讲解常用的基础Widget的使用方法。

关键知识点

1. 什么是Widget？

Widget是Flutter中描述UI元素的类。它可以是可见的UI组件（如文本、按钮、图片等），也可以是不可见的布局组件（如行、列、堆叠等）。Widget是轻量级的、不可变的，并且可以嵌套组合以构建复杂的UI。

• 不可变性：Widget是不可变的，一旦创建就不能修改。如果需要更新UI，Flutter会重新构建Widget树。
• 组合性：通过组合多个Widget，可以构建复杂的UI结构。

2. StatelessWidget与StatefulWidget的区别

在Flutter中，Widget分为两种主要类型：StatelessWidget和StatefulWidget。

• StatelessWidget：表示不可变的UI组件。一旦创建，其状态不会改变。适用于静态内容或不需要动态更新的UI。

  class MyText extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Text('Hello, Flutter!');
    }
  }

• StatefulWidget：表示可变的UI组件。它可以在运行时动态更新状态，适用于需要根据用户交互或数据变化而更新的UI。

  class Counter extends StatefulWidget {
    @override
    _CounterState createState() => _CounterState();
  }
  
  class _CounterState extends State<Counter> {
    int _count = 0;
  
    void _increment() {
      setState(() {
        _count++;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          Text('Count: $_count'),
          ElevatedButton(
            onPressed: _increment,
            child: Text('Increment'),
          ),
        ],
      );
    }
  }

3. 常用基础Widget

Flutter提供了丰富的内置Widget，以下是一些常用的基础Widget：

• Text：用于显示文本内容。

  Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 24, color: Colors.blue),
  )

• Image：用于显示图片。可以从网络、本地文件或资源中加载图片。

  Image.network('https://example.com/image.png')

• Container：一个多功能的布局Widget，可以设置尺寸、背景颜色、边距、内边距等。

  Container(
    width: 100,
    height: 100,
    color: Colors.red,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(5),
    child: Text('Container'),
  )

• Row 和 Column：用于在水平或垂直方向上排列子Widget。

  Row(
    children: [
      Text('Left'),
      Text('Right'),
    ],
  )
  
  Column(
    children: [
      Text('Top'),
      Text('Bottom'),
    ],
  )

• Stack：用于将多个Widget叠加在一起。

  Stack(
    children: [
      Image.network('https://example.com/image.png'),
      Positioned(
        bottom: 10,
        right: 10,
        child: Text('Overlay Text'),
      ),
    ],
  )

示例代码

以下是一个简单的Flutter应用示例，展示了如何使用StatelessWidget和StatefulWidget，以及一些常用的基础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 Widget Basics'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 24, color: Colors.blue),
              ),
              SizedBox(height: 20),
              Image.network('https://example.com/image.png'),
              SizedBox(height: 20),
              Counter(),
            ],
          ),
        ),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

小结

本章介绍了Flutter的核心概念——Widget，并详细讲解了StatelessWidget与StatefulWidget的区别，以及常用的基础Widget的使用方法。通过本章的学习，你应该能够理解如何通过组合和配置Widget来构建Flutter应用的UI界面。在接下来的章节中，我们将深入探讨更复杂的布局和交互Widget。

---

下一章预告：第5章将介绍Flutter中的布局Widget，帮助你掌握如何构建复杂的UI布局。