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

StatelessWidget 是无状态组件，状态不可变的 widget。

StatefulWidget 是有状态组件，持有的状态可能在 widget生命周期改变。

组件定义

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     // TODO: implement build
  11.     return Center(
  12.       child: Text(
  13.         'Hello Flutter',
  14.         textDirection: TextDirection.ltr, // 坑， 必须明确告诉 Flutter 文本的方向，否则会报错 No Directionality widget found
  15.         style: TextStyle(
  16.           fontSize: 30.0,
  17.           color: Colors.yellow,
  18.         ),
  19.       ),
  20.     );
  21.   } 
  22. }

Center 部件：

  • 只能有一个chlid，但是可以用container包含好多子child，继承自Align。
  • 用于将其子项与其自身对齐，并根据子级的大小自行调整大小。
  • 如果它的尺寸受到约束且[widthFactor]和[heightFactor]为空，则此窗口小部件将尽可能大。 如果维度不受约束且相应的大小因子为null，则窗口小部件将匹配其在该维度中的子项大小（其实就是子view的宽高就是center容器的宽高）。 如果尺寸因子为非null，则此center容器的相应尺寸将是子view的尺寸和尺寸因子的乘积。

Text部件：

  • 设置文本的部件
  • textDirection 要设置， 否则会报错 No Directionality widget found ， 除非你使用了 MaterialApp
  • 这个部件没有点击事件， 需要 使用GestureDetector 部件才能实现文本点击事件。
  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     // TODO: implement build
  11.     return Center(
  12.         child: GestureDetector(
  13.             onTap: () {
  14.                 print("点击了按钮");
  15.             },
  16.             child: Text(
  17.                 'Hello Flutter',
  18.                 textDirection: TextDirection.ltr, // 坑， 必须明确告诉 Flutter 文本的方向，否则会报错 No Directionality widget found
  19.                 style: TextStyle(
  20.                 fontSize: 30.0,
  21.                 color: Colors.yellow,
  22.                 ),
  23.             ),
  24.         )
  25.     );
  26.   }
  27. }

Colors 部件：

  • 设置颜色的， 也可以使用 color: Color.fromRGBO(244, 233, 121, 0.5),

导航栏

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     // TODO: implement build
  11.     return MaterialApp(
  12.         home: Scaffold(
  13.             appBar: AppBar(
  14.                 title: Text(
  15.                     'Flutter Demo'
  16.                 ),
  17.             ),
  18.             body: HomeWidget(),
  19.         ),
  20.         theme: ThemeData(
  21.             primarySwatch: Colors.yellow,
  22.         ),
  23.     );
  24.   }
  25. }
  27. class HomeWidget extends StatelessWidget {
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Center(
  31.         child: GestureDetector(
  32.             onTap: () {
  33.                 print("点击了按钮");
  34.             },
  35.             child: Text(
  36.                 'Hello Flutter',
  37.                 textDirection: TextDirection.ltr, // 坑， 必须明确告诉 Flutter 文本的方向，否则会报错 No Directionality widget found
  38.                 style: TextStyle(
  39.                 fontSize: 30.0,
  40.                 // color: Colors.yellow,
  41.                 color: Color.fromRGBO(244, 233, 121, 0.5),
  42.                 ),
  43.             ),
  44.         )
  45.     );
  46.   }
  47. }

MaterialApp 部件：

  • 用于整体布局。
  • 参数22个参数 ， 常用的有home ，routes ， initialRoute等。

Scaffold部件：

  • appBar 用于设置导航栏
  • body 用于设置界面的内容部分