Flutter 学习笔记（一）有无状态组件 Center / MaterialApp / Scaffold / Container / Text 组件

有状态/无状态组件

1. StatelessWidget 是无状态组件，状态不可变的
2. widget StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget。

StatelessWidget 是无状态组件，状态不可变的 widget StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。通俗的讲：如果我 们想改变页面中的数据的话这个时候就需要用到 StatefulWidget

无状态组件

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

// 自定义组件
// StatelessWidget 抽象类
class MyApp extends StatelessWidget {
  // 抽象类里面的抽象方法
  @override
  // Widget 表示组件，一切皆为组件
  Widget build(BuildContext context) {
    return Center(
      child: Text(
      "hello 1234",
      textDirection: TextDirection.ltr,
    ));
  }
}

案例使用有状态组件实现点击+1的效果

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Hello Demo")), body: HomePage()));
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Chip(
        label: Text('${this.countNum}'),
      ),
      ElevatedButton(
          onPressed: () {
            setState(() {
              this.countNum++;
            });
          },
          child: Text("确定"))
    ]);
  }
}

MaterialApp 和 Scaffold 两个组件

MaterialApp

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用。

常用的属性： home（主页） title（标题） color（颜色） theme（主题） routes（路由）...

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、 snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性： appBar - 显示在界面顶部的一个 AppBar。 body - 当前界面所显示的主要内容 Widget。 drawer - 抽屉菜单控件。 ...

import 'package:flutter/material.dart'; //- 库

void main()=> runApp(MyApp());


// 自定义组件
// StatelessWidget 抽象类
class MyApp extends StatelessWidget {
  // 抽象类里面的抽象方法
  @override
  // Widget 表示组件，一切皆为组件
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Demo')),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

// 分离内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
      "hello world",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Colors.yellow,
      ),
    ));
  }
}

Container 和 Text 组件

Text组件:

名称	功能
textAlign	文本对齐方式（center 居中，left 左 对齐，right 右对齐，justfy 两端对齐）
textDirection	文本方向（ltr 从左至右，rtl 从右至 左）
overflow	文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor	字体显示倍率 maxLines 文字显示最大行数 style 字体的样式设置

下面是 TextStyle 的常用参数 ：

名称	功能
decoration	文字装饰线（none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线）
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格（[dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线）
wordSpacing	单词间隙（如果是负值，会让单词变得更紧凑
letterSpacing	字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle	文字样式（italic 斜体，normal 正常体）
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细（bold 粗体，normal 正常体）

Container 组件

名称	功能
alignment	topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐
decoration	decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: Colors.red, width: 2.0, ), borderRadius: BorderRadius.all( Radius.circular(8.0) ) )
margin	margin 属性是表示 Container 与外部其他 组件的距离。 EdgeInsets.all(20.0)
padding	padding 就 是 Container 的 内 边 距 ， 指 Container 边缘与 Child 之间的距离 padding: EdgeInsets.all(10.0)
transform	让 Container 容易进行一些旋转之类的
height	容器高度
width	容器宽度
child	容器子元素

import 'package:flutter/material.dart'; //- 库

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

// 自定义组件
// StatelessWidget 抽象类
class MyApp extends StatelessWidget {
  // 抽象类里面的抽象方法
  @override
  // Widget 表示组件，一切皆为组件
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Demo')),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

// 分离内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      child: Text('我是文本我是文本我是文本我是文本我是文本我是文本我是文本',
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
          textScaleFactor: 1.8,
          style: TextStyle(
              fontSize: 16.0,
              color: Colors.red,
              fontWeight: FontWeight.w800,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.lineThrough,
              decorationColor: Colors.blue,
              decorationStyle: TextDecorationStyle.dashed,
              letterSpacing: 5.0)),
      height: 300.0,
      width: 300.0,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.blue, width: 2.0),
        borderRadius: BorderRadius.all(Radius.circular(15)),
      ),
      // padding: EdgeInsets.all(20),
      // padding: EdgeInsets.fromLTRB(left, top, right, bottom)
      // margin: EdgeInsets.fromLTRB(left, top, right, bottom)
      padding: EdgeInsets.fromLTRB(20, 5, 0, 2),
      // transform: Matrix4.translationValues(100, 20, 0),
      transform: Matrix4.rotationZ(0.3),
      alignment: Alignment.bottomLeft, //- 文字显示的位置
    ));
  }
}

参考教程：api.flutter.dev/flutter/wid…