【Flutter】Flutter学习笔记

1、我们知道在Flutter中几乎所有的对象都是一个 widget 。

2、在 Flutter 中， widget 的功能是“描述一个UI元素的配置信息”，所谓的配置信息就是 Widget 接收的参数，比如对于 Text 来讲，文本的内容、对齐方式、文本样式都是它的配置信息。

3、Text widget

Text(
   'HELLO WENMEICHAO!',
   textDirection: TextDirection.ltr,
),

4、在写应用的过程中，取决于是否需要管理状态，你通常会创建一个新的组件继承 StatelessWidget 或 StatefulWidget。  Widget 的主要工作是实现 build() 方法，该方法根据其它较低级别的 widget 来描述这个 widget。

5、Flutter 自带了一套强大的基础 widgets

Text，

Row，Column 这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。

Stack 按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。

Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。

6、 Container 布局

  Widget build(BuildContext context) {
    return Container(
      height: 56.0, //高度
      padding: const EdgeInsets.symmetric(horizontal: 8.0), //边距
      decoration: BoxDecoration(color: Color.fromARGB(255, 105, 187, 241)), //背景
      child: Row(
        children: [
          const IconButton( //按钮
            onPressed: null, //点击方法
            icon: Icon(Icons.menu), //图标
            tooltip: 'Navigation Menu', //提示文字
          ),
          Expanded(child: title), //其余部分？还是占位
          const IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
            tooltip: 'Search',
          ),
        ],
      ),
    );
  }

 Expanded，意味着它会扩展以填充其它子 widget 未使用的可用空间。你可以定义多个Expanded 子 widget，并使用 flex 参数确定它们占用可用空间的比例。 

7、column 布局

Widget build(BuildContext context) {
    return Material( //这个个什么widget?
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.headline6
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('我是内容'),
            ),
          ),
        ],
      ),
    );
  }

8、调用组件的类

class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key}); //this.title

  final Widget title; //定义属性
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Color.fromARGB(255, 105, 187, 241)),
      child: Row(
        children: [
          const IconButton(
            onPressed: null,
            icon: Icon(Icons.menu),
            tooltip: 'Navigation Menu',
          ),
          Expanded(child: title),
          const IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
            tooltip: 'Search',
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  const MyScaffold({super.key});
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          MyAppBar(
            title: Text( //属性调用
              'Example title',
              style: Theme.of(context).primaryTextTheme.headline6
            ),
          ),
          const Expanded(
            child: Center(
              child: Text('我是内容'),
            ),
          ),
        ],
      ),
    );
  }
}

9、处理手势

class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('737764666!');
      },
      child: Container(
        height: 50.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: const Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}

 GestureDetector widget 没有可视化的展现，但它能识别用户的手势。当用户点击 Container 时， GestureDetector 会调用其 onTap() 回调，在这里会向控制台打印一条消息。你可以使用 GestureDetector 检测各种输入的手势，包括点击，拖动和缩放。

10、StatelessWidget 和 StatefulWidget（无状态的/有状态的）

无状态 widget 接收的参数来自于它的父 widget，它们储存在 final 成员变量中。当 widget 需要被 build() 时，就是用这些存储的变量为创建的 widget 生成新的参数。

有状态 widget。StatefulWidgets 是一种特殊的 widget，它会生成 State 对象，用于保存状态。

class Counter extends StatefulWidget { //有状态的widget
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center, //航局中
      children: <Widget>[
        ElevatedButton(
          onPressed: _increment,
          child: const Text('Increment'),
        ),
        const SizedBox(width: 16),
        Text('Count: $_counter'),
      ],
    );
  }
}

为什么 StatefulWidget 和 State 是独立的对象。在 Flutter 中，这两种类型的对象具有不同的生命周期。 Widget 是临时对象，用于构造应用当前状态的展示。而 State 对象在调用 build() 之间是持久的，以此来存储信息。