《深入浅出Dart》Widget和布局

点击在线阅读，体验更好	链接
现代JavaScript高级小册	链接
深入浅出Dart	链接
现代TypeScript高级小册	链接

Widget和布局

Flutter的布局与HTML/CSS布局方式上的写法有很大的不同，Flutter使用基于组件树的布局模型，其中每个组件都有自己的布局和渲染逻辑。相比之下，HTML/CSS使用基于盒模型的布局，其中元素通过框模型和定位属性进行布局。

Widget：Flutter用户界面的构建块

在Flutter中，一切皆是Widget。Widgets是Flutter用户界面的基本构建块，用于描述应用程序在给定其当前配置和状态的情况下应该如何显示。通过组合不同的Widget，我们可以构建出复杂、美观的用户界面。

Flutter中的Widget分为两类：

StatelessWidget

StatelessWidget是不可变的，一旦创建就不能更改。它们通常用于表示那些没有状态改变的静态UI元素。例如，Icon、Text、Container等都是无状态的Widget。

class MyStatelessWidget extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Container(
      child: Text('Hello World'),
    );
  }
}

StatefulWidget

StatefulWidget是有状态的，可以根据应用程序的状态和用户交互来改变。当状态发生变化时，StatefulWidget会自动重绘UI。常见的有状态Widget包括按钮、输入框、列表等。

class MyStatefulWidget extends StatefulWidget