Flutter04-APP初体验

初体验Widget

• • • 一. Widget
    • • • 1.1. 万物皆是Widget
        • 1.2. Material设计风格
    • 二. 实例一 hello flutter
    • • • 2.1. text
        • 2.2. 居中
        • 2.3. 添加导航栏
        • 2.4. 改进
    • 三. 案例二 同意协议
    • • • 3.1. 错误代码
        • 3.2. 正确代码

一. Widget 1.1. 万物皆是Widget

• Flutter整个应用程序中所看到的内容几乎都是Widget，甚至内边距的设置也是Widget；
• Flutter中的Widget(小部件或者组件)，相当于iOS、Android中的控件，相当于Vue、React中的组件；但Fullter中Widget更彻底。

1.2. Material设计风格

• material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
• 里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
• 在Flutter中高度集成了Material风格的Widget；

二. 实例一 hello flutter 2.1. text

import 'package:flutter/material.dart';

void main() {
  // runApp(const MyApp());
  runApp(Text('hello flutter', textDirection: TextDirection.ltr));
}

2.2. 居中

void main() {
  // runApp(const MyApp());
  runApp(
    Center(
        child: Text(
          'hello flutter', 
          textDirection: TextDirection.ltr, 
          style: TextStyle(fontSize: 30),
        )
    )
  );
}

2.3. 添加导航栏

void main() {
  // runApp(const MyApp());
  runApp(
    MaterialApp(//material 风格
      home: Scaffold(//脚手架
        appBar: AppBar(//导航栏
          title: Text("第一个应用程序"),
        ),
        body: Center(//主视图
          child: Text(
            'hello flutter', 
            textDirection: TextDirection.ltr, 
            style: TextStyle(fontSize: 30),
          )
        ),
      ) 
    )
  );
}

2.4. 改进

• widget:
  • 无状态的Widget: StatelessWidget
  • 有状态的Widget: StatefulWidget
  • StatefulWidget就是有状态的Widget。它在程序运行时，状态被允许发生改变，要想编写出能够被用户 *** 作的App，就必须要使用StatefulWidget。

void main() {
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//material 风格
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(//脚手架
      appBar: AppBar(//导航栏
        title: Text("第一个应用程序!"),
      ),
      body: HHContentBody(),
    );
  }
}

class HHContentBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(//主视图
        child: Text(
          'hello flutter', 
          textDirection: TextDirection.ltr, 
          style: TextStyle(fontSize: 30),
        )
      );  
  }
}

三. 案例二 同意协议

• 所有的Widget被注解@immutable修饰，所有成员变量不可变

3.1. 错误代码

//所有的Widget被注解@immutable修饰，内部不可含有可变属性
class HHContentBody extends StatelessWidget {
  var flag = true;//错误写法
  @override
  Widget build(BuildContext context) {
    return Center(//主视图
        child: Row(//行
          mainAxisAlignment: MainAxisAlignment.center,//居中
          children: [
            Checkbox(value: flag, onChanged: (flag){
              ValueKey(flag);
            }),
            Text('同意协议'),
          ],
        )
      );
  }
}

3.2. 正确代码

void main() {
  // runApp(const MyApp());
  runApp(
    MyApp()
  );
}

/**
 * widget:
 * 有状态的Widget: StatefulWidget
 * 无状态的Widget: StatelessWidget
 */

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//material 风格
      home: HomePage()
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(//脚手架
      appBar: AppBar(//导航栏
        title: Text("第一个应用程序!"),
      ),
      body: HHContentBody(),
    );
  }
}

class HHContentBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HHContentBodyState();
  }
}

//flag: 状态
class HHContentBodyState extends State<HHContentBody> {
  var flag = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(value: flag, onChanged: (value){
            // flag = value!;
            print(flag);
            setState(() {
              flag = value!; 
            });
          }),
          Text('同意协议')
        ],
      ),
    );
  }
}