flutter学习1 - 技术栈

1.StatelessWidget与StatefulWidget

StatelessWidget是一种内部数据不需要随数据变化而更新的widget,反之，StatefulWidget是需要随数据变化的

2.Stateless

1.需要重写build方法

Dart 复制代码

class MyPaddingText extends StatelessWidget {
  const MyPaddingText({super.key, required this.text});
  // 构造参数需要final
  final String text;
  // 需要返回一个widget
  @override
  Widget build(BuildContext context) => Padding(
    padding: EdgeInsetsGeometry.all(12),
    child: Text(text),
  );
}

2.fun => result

可以观察上面重写的build方法，他的方法体就是直接return了一个结果

还有一种写法如下

Dart 复制代码

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsetsGeometry.all(12),
    child: Text(text),
  );
}

如果使用koltin来理解，就是下面这种写法

Kotlin 复制代码

fun build(context: BuildContext) = Padding(
    padding: EdgeInsetsGeometry.all(12),
    child: Text(text)
)

3.StatefulWidget

从我看这个写法来讲，我觉得是把状态Widget分为了两部分，一部分是直接的普通无状态的数据定义，类似于外部声明一些和Widget无关的属性，另一部分是状态和对应的Widget

直观来讲的话重写这个需要做两件事：

重写createState返回一个State<StatefunWidget>
重写要返回的这个state中的build方法返回widget

1.需要重写createState方法

关键是内容当中返回一个State对象

1.State对象的Demo

Dart 复制代码

class MyHomePageState extends State<MyHomePage> {
  // 计数器
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    Color barBackgroundColor = Theme.of(context).colorScheme.inversePrimary;
    Text text = Text(widget.title);
    return Scaffold(
      // appBar
      appBar: AppBar(backgroundColor: barBackgroundColor, title: text),
      // 这个是中间的部分
      body: Center(
        child: Column(
          // 枚举类型可以直接.center, 相当于MainAxisAlignment.center
          mainAxisAlignment: .center,
          children: [
            MyPaddingText(text: "这是第一行内容"),
            Text("这是第一行内容"),
            Text("这是第2行内容"),
            Text("这是第3行内容"),
            Text("这是第4行内容"),
            Text("这是第5行内容"),
          ],
        ),
      ),
      // 这个是浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        tooltip: '加法浮动按钮',
        child: const Icon(Icons.add),
      ),
    );
  }
}

2.State对象中的注意事项

State对象持有他在继承时，泛型里填写的StatefulWidget类型的对象
持有的StatefulWidget对象就是调用createState时的那个对象

2.重写State中的build方法

这个build方法返回的值就是这个StatefulWidget真正的要看见的Widget