边学边写搞flutter第二弹，认识基础结构与组件

2023-12-13 22:53:42

前言

在边学边写搞flutter第一弹 中，我们完成了对Flutter基本概念的认识，并在实践中构建了一个简单的页面。而在这篇边学边写搞flutter第二弹 中，我们将继续深入学习Flutter的基础结构和组件，通过一些更复杂的页面来巩固我们在第一弹中学到的知识。

基础结构

在Flutter中，页面由多个组件组成。这些组件包括：

Widget： 组件是Flutter的基本构建块。它可以是任何东西，从简单的文本到复杂的动画。
Layout： 布局决定了组件在页面上的位置和大小。
State： 状态决定了组件的外观和行为。

在我们的第一个例子中，我们将创建一个简单的页面，其中包含一个文本和一个按钮。要做到这一点，我们需要创建一个Text组件和一个Button组件，并将它们添加到一个Column组件中。Column组件是一个布局组件，它将它的子组件垂直排列。

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My HomePage'),
      ),
      body: Column(
        children: <Widget>[
          Text('Hello, world!'),
          Button(
            child: Text('Click me'),
            onPressed: () {
              print('Button clicked!');
            },
          ),
        ],
      ),
    );
  }
}

组件

组件是Flutter的基本构建块。它可以是任何东西，从简单的文本到复杂的动画。

Flutter提供了各种内置组件，包括：

Text ：显示文本。
Button ：响应用户交互的按钮。
Image ：显示图像。
Container ：一个简单的容器，可以用来组织其他组件。
Row ：将组件水平排列。
Column ：将组件垂直排列。

我们还可以创建自己的组件。要做到这一点，我们需要创建一个类，并继承自Widget类。然后，我们需要实现build()方法。build()方法返回一个组件，该组件将显示在页面上。

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  MyButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(text),
      onPressed: onPressed,
    );
  }
}