Flutter-UI布局和控件

基础控件

Widget

在 Flutter 中，UI 控件就是所谓的 Widget。通过组合不同的 Widget，来实现与用户交互的界面。
Widget 分为两种：

• 无状态的 StatelessWidget：只能用来展示信息，不能有动作（用户交互）。
• 有状态的 StatefulWidget：可以通过改变状态使得 UI 发生变化，它可以包含用户交互。

示例：

import 'package:flutter/material.dart';

/// 继承 StatelessWidget，然后实现 build 方法：
/// StatelessWidget 整个生命周期里都不会改变，所以 build 方法只会执行一次。
class FooWidget extends StatelessWidget{
  //  build 方法里面返回一个 Widget
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

/// 继承 StatefulWidget，并且需要一个 State：
/// StatefulWidget 只要状态改变，就会调用 build 方法重新创建 UI。
/// 可以调用 setState 方法，来触发 UI 的重建。
class BarWidget extends StatefulWidget{
  // 将 build 方法挪到了 State 里
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BarWidgetState();
  }
}

class _BarWidgetState extends State<BarWidget>{
  //  build 方法里面返回一个 Widget
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return null;
  }
}

文本

使用 Text 来展示文本。

链接

参考资料

Flutter学习指南：UI布局和控件