Flutter常用的组件

应用程序组件

MaterialApp

它是应用程序的入口。

API

{ ThemeData } theme: 默认视觉属性，例如颜色字体和形状。
initialRoute: 初始化路由。
onGenerateRoute: 路由生成器。建议路由使用beamer。

import 'package:flutter/material.dart';
import 'package:beamer/beamer.dart';

class Routes {
  static String home = '/';

  static final routerDelegate = BeamerDelegate(
    locationBuilder: SimpleLocationBuilder(
      routes: {
        home: (BuildContext context, BeamState state) => Home()
      }
    )
  );
}

class MaterialAppExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      theme: ThemeData(primaryColor: Colors.white), // 修改主体颜色
      routeInformationParser: BeamerParser(),
      routerDelegate: Routes.routerDelegate
    );
  }
}

Scaffold

基本的视觉布局结构。此类提供用于显示抽屉和底部工作表的API。

API

{ AppBar } appBar: 顶部
body

import 'package:flutter/material.dart';

class Scaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0, // 去除阴影
        backgroundColor: Colors.white, // 修改主体颜色
        shape: Border(bottom: BorderSide(color: Color(0x000000), width: 1)), // 下边框
        title: Text('标题', style: TextStyle(color: Colors.black)),
        actions: <Widget>[SendButton(buttonText: '按钮')],
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () {}
        )
      ),
      body: Component()
    );
  }
}

AppBar

应用栏目。

API

elevation: 阴影。
backgroundColor: 背景颜色。
shape: 下边框。
title: 导航标题。
actions: 右侧小组件。
leading: 左侧导航配置。

盒模型布局组件

Container

一个方便的小部件，结合了常见的绘画、定位和大小调整小部件。

API

width: 宽
height: 高
padding
{ BoxDecoration } decoration

import 'package:flutter/material.dart';

class ContainerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1.0,
            color: Color.fromRGBO(238, 238, 238, 1)
          )
        )
      ),
      padding: EdgeInsets.only(top: 12.0, bottom: 12.0),
      child: Component()
    );
  }
}

Column

在垂直阵列中显示其子项的小部件。

Row

在水平阵列中显示其子项的小部件。

Expanded

扩展 Row、Column 或 Flex 的子级以便子级填充可用空间的小部件。

GridView

网格组件。

import 'package:flutter/material.dart';

class GridViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,    //横轴三个子widget
        childAspectRatio: 1.0 //宽高比为1时，子widget
      ),
      children:<Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast)
      ]
    );
  }
}

API

{ bool } shrinkWrap: 该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。默认情况下，ListView的会在滚动方向尽可能多的占用空间。当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。
physics: NeverScrollableScrollPhysics()。禁止滑动。
controller: ScrollController(keepScrollOffset: false)。禁止回弹效果。

ListView

列表组件，可以允许滚动。

Stack

重叠布局，允许子组件堆叠。

Positioned

配合Stack实现绝对定位。

SizedBox

一般用来限制子控件的大小。

样式组件

Center

将其子项置于自身中心的小部件。

Align

对齐组件。

Padding

内边距组件。

import 'package:flutter/material.dart';

class PaddingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 5.0, right: 10.0, bottom: 5.0, left: 10.0),
      child: Text('Padding')
    );
  }
}

ClipRRect

圆角形状。

import 'package:flutter/material.dart';

class ClipRRectExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(5.0),
      child: Component()
    );
  }
}

功能组件

ElevatedButton

按钮组件。

import 'package:flutter/material.dart';

class ElevatedButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Color.fromRGBO(245, 67, 67, 1)), // 颜色
        shape: MaterialStateProperty.all( // 带有圆角的矩形边框
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0))
        ),
        side: MaterialStateProperty.all(BorderSide(color: Colors.purple, width: 3))
      ),
      child: Padding(
        child: Text('按钮')
      ),
      onPressed: () {}
    );
  }
}

ElevatedButton.icon

带图标的按钮组件。

import 'package:flutter/material.dart';

class ElevatedButtonIconExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      icon: Icon(Icons.g_mobiledata),
      label: Text('按钮'),
      onPressed: () {},
    );
  }
}

IconButton

图标按钮。

TextField

表单input输入组件。

import 'package:flutter/material.dart';

final TextEditingController controller = TextEditingController();
final FocusNode focusNode = FocusNode();

class TextFieldExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      focusNode: focusNode,
      autofocus: true,
      minLines: 5,
      maxLines: 10,
      keyboardType: TextInputType.multiline,
      textInputAction: TextInputAction.newline,
      decoration: InputDecoration.collapsed(hintText: '请输入文字'),
      onChanged: (String value) {}
    );
  }
}

Image

图片展示组件。

AssetImage

响应式加载图片。

Image img = Image(image: AssetImage('statics/images/1.png'));

NetworkImage

加载网络图片。

Image img = Image(
  image: NetworkImage('https://example.com/1.png'),
  fit: BoxFit.cover // 设置图片的背景展示
);

Image.file

加载本地图片。

Image image = Image.file(File(imagePath));

Image.memory

根据Uint8List渲染图片。

Uint8List img = getImage();
Image image = Image.memory(img, fit: BoxFit.cover);

工具组件

GestureDetector

手势检测的部件。

import 'package:flutter/material.dart';

/// 取消input的焦点
class GestureDetectorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        // 触摸收起键盘
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Text('')
    );
  }
}

showDialog

展示弹出框。

import 'package:flutter/material.dart';

/// 弹出框
/// @param { BuildContext } context
/// @param { String } message: 文本
void alert(BuildContext context, String message) {
  showDialog(
    context: context,
    barrierColor: Color.fromRGBO(0, 0, 0, 0),
    builder: (c) {
      return AlertDialog(
        backgroundColor: Color.fromRGBO(33, 34, 35, 0.9),
        elevation: 0,
        content: Text(
          message,
          style: TextStyle(color: Colors.white),
          textAlign: TextAlign.center
        )
      );
    }
  );
}

InheritedWidget

状态管理。

class InheritedWidgetProvider extends StatefulWidget {
  @override
  _InheritedWidgetProvider createState() => _InheritedWidgetProvider();
}

class _InheritedWidgetProvider extends State<InheritedWidgetProvider> {
  String value = '';

  @override
  Widget build(BuildContext context) {
    return InheritedWidgetExample(value: value);
  }
}

class InheritedWidgetExample extends InheritedWidget {
  String value;

  InheritedWidgetExample({
    Key? key,
    required Widget child,
    required String this.value
  }): super(key: key, child: child);

  static InheritedWidgetExample of(BuildContext context) {
    final FormValueContext? ctx
      = context.dependOnInheritedWidgetOfExactType<FormValueContext>();

    return ctx!;
  }

  @override
  bool updateShouldNotify(FormValueContext oldWidget) {
    return oldWidget.value != value;
  }
}

Notification

跨组件通信。网站参考：https://zhuanlan.zhihu.com/p/110120429。

RawKeyboardListener

监听键盘事件。

参考地址：

Flutter实战：https://book.flutterchina.club/

Flutter富文本编辑器：https://pub.dev/packages/rich_code_editor

Flutter自定义块样式输入框：https://github.com/JiangJuHong/FlutterTextSpanField