详解Flutter Widget

Flutter是一个跨平台的移动应用开发框架，其使用Dart语言进行开发，在Flutter中，一切都是Widget。Widget是Flutter中所有用户界面块的基本单元。 应用程序UI是使用嵌套Widget构建起来的，而这些Widget可以是布局元素，例如Container或Row，也可以是几乎所有的可视元素，如按钮、文本或图像。在本文中，我们将深入讲解Flutter Widget。

Widget简介

Widget是Flutter的基本概念。Widget是UI元素，例如按钮、文本或图像。但是，Widget可以是特定定义颜色、大小、形状和布局的构建块。Flutter框架提供丰富的内置Widget，以及许多用户创建的Widget。 Widget是不可变的，这意味着一旦创建，就无法更改。但是，我们可以在当前Widget的基础上创建新的Widget来进行修改。

Widget的类型

Flutter中有两种基本类型的Widget：

StatelessWidget

StatelessWidget是一种无状态的Widget，它在构建时只需要一次参数。例如，一个固定的文本信息可以在widget的生命周期内不改变而是一直保持不变。 StatelessWidget主要使用在内容展示、单独视图和导航等场景。

StatefulWidget

StatefulWidget 是一种有状态机的Widget，在构建时可以使用参数和状态来进行重建。例如，一个包含了用户输入的表单，每次输入都要重新绘制，这正是statefulwidget发挥作用的时候。StatefulWidget主要使用在：有用户交互的控件、列表视图等动态视图。

Flutter Widget的常用组件

在Flutter中，有很多内置的Widget，比如Text、Image、RaisedButton等。为了更好地理解如何使用这些Widget，我们来看两个示例。

示例1：简单APP

这个简单应用程序演示如何使用Flutter的探究性模板。该应用程序包括一个居中的标题和一些列表。其中，每个列表都是可点击的。点击后将会切换到带签名的新页面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String title = 'My Simple App';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Welcome to my app!',
                style: TextStyle(fontSize: 24),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20),
                child: Text(
                  'You can select one of the following:',
                  style: TextStyle(fontSize: 18),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(20),
                child: RaisedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SecondRoute(),
                      ),
                    ); 
                  },
                  child: Text('Go to Second Route'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Route'),
        centerTitle: true,
      ),
      body: Center(
        child: Text('This is the second route.'),
      ),
    );
  }
}

示例2：使用ListTile的展示列表

在这个示例中，我们将使用ListTile Widget展示一个包含多个列表项的列表。我们可以使用 onTap 属性使得每个列表项可被点击。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final String title = 'My Simple List App';

  final List<String> items = List<String>.generate(10, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          centerTitle: true,
        ),
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: Icon(Icons.radio_button_unchecked),
              title: Text('This is an item'),
              onTap: () {
                Scaffold.of(context).showSnackBar(
                  SnackBar(content: Text('Item $index tapped')),
                );
              },
            );
          },
          itemCount: items.length,
        ),
      ),
    );
  }
}

以上这两个示例突显了Flutter Widget的强大能力。在下一篇文章中，我们将探讨有关Flutter甚至更深层次的话题，包括动画和自绘(自定义绘制)。