Flutter-常用的weiget介绍（一）内容widget介绍

Widget介绍

widget可以把它看作成一个组件（或者是一个单元），在Flutter中，就是通过widget来构建项目的UI，Flutter有一套丰富、强大的基础widget，下面是比较常用的Widget

runApp函数

接受给定的Widget并使用其作为widget根

Stateless widgets

是不可变的，这意味着它们的属性不能改变——所有的值都是 final

Stateful widgets

持有的状态可能在 widget 生命周期中发生变化，实现一个 stateful widget 至少需要两个类：

• 一个 StatefulWidget 类；
• 一个 State 类；

StatefulWidget 类本身是不变的，但是 State 类在widget 生命周期中始终存在，通过State里面修改属性的值从而达到页面的重新渲染；

如果需要变化需要重新创建。StatefulWidget可以保存自己的状态。那问题是既然widget都是immutable的，怎么保存状态？其实Flutter是通过引入了State来保存状态。当State的状态改变时，

能重新构建本节点以及孩子的Widget树来进行UI变化。注意：如果需要主动改变State的状态，需要通过setState()方法进行触发，单纯改变数据是不会引发UI改变的

内容widget

Text 文本

该 widget 可让创建一个带格式的文本

示例demo1 (直接new Text的方式来设置)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Text(
        // 显示文本
         "Hello world",
        //  对齐方式
         textAlign: TextAlign.center,
         overflow: TextOverflow.ellipsis,
        //  设置样式
         style: TextStyle(color:Colors.pink)
      ),
    );
  }
}

示例demo2 (通过 Text.rich)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Text.rich(
        TextSpan(
          // 默认文本
          text: 'Hello',
          style: TextStyle(fontSize: 20),//设置默认的大小
          children: <TextSpan>[//里面可以放多个文本TextSpan，可以单独给每一个文本进行样式的设置和内容的设置
            TextSpan(text:'第一个显示的文本',style