Flutter高效教程笔记：React危机中的Widget组件、MaterialApp

terry 2年前 (2023-09-23) 阅读数 68 #移动小程序

Widget组件

发音/'wɪdʒɪt/。我认为Widget相当于React中的Component。

小部件以下统称为“部件”。

组件的特性

根据传递给它的配置和状态生成视图
当组件的状态发生变化时，组件将更新视图旧组件和新视图之间的差异，并使实际视图最小更改

runApp

这是 Flutter 应用程序必须调用才能接受小部件的 API。就我个人而言，我认为这与React的ReactDOM.render操作非常相似。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}
复制代码

上面代码的作用：

Center是一个类，Center()实例化了一个实例
1. 我非常欣赏删除新的做法。没有人会再问Center()和新Center()了。不同的是，去他妈的JS。
Center(...) 返回一个组件作为根组件
Center(...) 该组件的子组件是 Text(...)。如果只有一个子组件，则使用child。如果有多个children组件使用children
Flutter会强制根组件填满屏幕（好评），所以最终的效果就是有一个Hello, World!屏幕中间的字符串
代码中需要使用textDirection来指定文本方向，可以使用MaterialApp可以跳过这一步，我们稍后再讲
所有组件类要么是StatelessWidget 或者 StatefulWidget
一个组件的主要功能是提供一个 build 方法（个人认为类似于 React 的 render），build 方法可以调用其他几个组件
Flutter 会遍历这些子组件，然后计算出当前组件

基础组件

常用的组件有：

文字：顾名思义
行列：用于布局，与布局类似堆栈：用于布局，类似于 CSS 的绝对布局
Container：通用布局，类似于 div

MaterialApp

如果你想使用一些 For Material 风格的组件，只需要做这几件事：

在 pubspec.yaml 中添加以下代码： yml

 flutter:
     uses-material-design: true
复制代码

使用MaterialApp，当您运行应用程序并使用Material Components时

 runApp(MaterialApp(
     title: 'My app', // used by the OS task switcher
     home: Material(),
 ));
复制代码

import 'package:flutter/material.yml flutter:
     uses-material-design: true
复制代码

使用MaterialApp。 dart';

常用的Material组件

Navigator：类似于ReactRouter

AppBar：顶部栏

 AppBar(
     leading: IconButton(
         icon: Icon(Icons.menu),
         tooltip: 'Navigation menu',
         onPressed: null,
     ),
     title: Text('Example title'),
     actions: <Widget>[
         IconButton(
         icon: Icon(Icons.search),
         tooltip: 'Search',
         onPressed: null,
         ),
     ],
 )
复制代码

Scaffold：最常用的布局组件

 Scaffold(
   appBar: AppBar(...),
   body: Center(...),
   floatingActionButton: ...
 );
复制代码

这些槽位与Vue参数传递方法非常相似。

使用GestureDetector处理用户交互

这是一个自定义按钮小部件：

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(               //  <-- 注意看这里
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container(
        height: 36.0,
        padding: ...,
        margin: ...,
        decoration: ...,
        child: Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}
复制代码

GestureDetector小部件没有表示层，仅处理用户交互。当用户单击 Container 组件时，GestureDetector 组件会触发 onTap 回调。
GestureDetector 支持多种交互，例如点击、拖动和缩放。
许多其他小部件使用 GestureDetector 来接收回调，例如 IconButton、RaishedButton 和 FloatingActionButton 都接收按下回调。

更改状态

无状态组件从父级接收数据，并将数据存储在自己的final成员变量中（类似于JS的const）。

有状态组件知道如何创建状态对象和维护状态对象。

如何使用？

首先声明一个StatefulWidget

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
复制代码

这个Widget必须重写createState方法，并且该方法的返回值类型必须继承自State类。

_CounterState 如何继承状态？

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
        Text('Count: $_counter'),
      ],
    );
  }
}
复制代码

你需要重写构建方法来提供视图，你可以使用'$_counter'混合语法
来调用❀❓按钮-单击❿，这 _increment调用State提供的setState函数，并向setState函数传递一个函数。这个传递的函数可以改变数据。
非常类似于 Reacts 类组件。不同之处在于，
1. Flutter 的组件和状态是单独的类，而 React 仅使用哈希来表示状态。
2. Flutter的State提供了build方法，而React的state只是一个hash
3. Flutter将StatelessWidget和StatefulWidget分开，可以更好的组织代码