Flutter布局插件flutter_match_parent的使用

Flutter布局插件flutter_match_parent的使用

安装

安装最新版本的flutter_match_parent插件：

dependencies:
  flutter_match_parent: ^最新版本号

然后运行 flutter pub get 来获取依赖。

快速开始

首先，导入对应的包：

import 'package:flutter_match_parent/flutter_match_parent.dart';

使用matchParent()扩展方法包裹需要实现matchParent效果的组件即可。matchParent()方法支持以下属性：

  • alignment: 对齐方式，默认为Alignment.center
  • matchWidth: 是否撑满宽度，默认为true
  • matchHeight: 是否撑满高度，默认为true

示例代码

以下是一个完整的示例，展示了如何使用flutter_match_parent插件来实现不同布局效果。

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  static const double height = 46;

  const MainApp({super.key});

  Widget container(Widget child) => Container(
        color: Colors.red,
        constraints: const BoxConstraints(
          minHeight: height,
          maxHeight: height,
        ),
        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 8),
        padding: const EdgeInsets.all(4),
        alignment: Alignment.center,
        child: child,
      );

  Widget textWidget({
    Color color = Colors.white,
    String text = "文本内容",
  }) =>
      Container(
        color: color,
        child: Text(
          text,
          style: const TextStyle(
            fontSize: 9,
          ),
          textAlign: TextAlign.center,
        ),
      );

  [@override](/user/override)
  Widget build(BuildContext context) {
    var m = 8;
    var wm = 4;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('flutter_match_parent'),
        ),
        body: CustomScrollView(
          slivers: [
            const SliverToBoxAdapter(
              child: Text(
                "在普通容器(Container)中↓",
                textAlign: TextAlign.center,
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                textWidget(text: "正常布局(适应)"),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                textWidget(text: "正常布局" * m),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                textWidget(text: "match_parent布局(强行撑满)").matchParent(),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                textWidget(text: "match_parent布局" * wm).matchParent(),
              ),
            ),
            const SliverToBoxAdapter(
              child: Text(
                "在容器(Row)中↓",
                textAlign: TextAlign.center,
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [Expanded(child: textWidget(text: "正常布局(适应)"))],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [Expanded(child: textWidget(text: "正常布局" * m))],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    Expanded(
                      child: textWidget(text: "match_parent布局(强行撑满)").matchParent(),
                    )
                  ],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    Expanded(
                      child: textWidget(text: "match_parent布局" * wm).matchParent(),
                    )
                  ],
                ),
              ),
            ),
            const SliverToBoxAdapter(
              child: Text(
                "在容器(Row-Expanded)中↓",
                textAlign: TextAlign.center,
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    container(textWidget(text: "Left")),
                    Expanded(child: textWidget(text: "正常布局(适应)")),
                    container(textWidget(text: "Right")),
                  ],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    container(textWidget(text: "Left")),
                    Expanded(child: textWidget(text: "正常布局" * m)),
                    container(textWidget(text: "Right")),
                  ],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    container(textWidget(text: "Left")),
                    Expanded(
                      child: textWidget(text: "match_parent布局(强行撑满)").matchParent(),
                    ),
                    container(textWidget(text: "Right")),
                  ],
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: container(
                Row(
                  children: [
                    container(textWidget(text: "Left")),
                    Expanded(
                      child: textWidget(text: "match_parent布局" * wm).matchParent(),
                    ),
                    container(textWidget(text: "Right")),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter布局插件flutter_match_parent的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter布局插件flutter_match_parent的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_match_parent 是一个用于 Flutter 的布局插件，它允许你将子组件的尺寸设置为匹配父组件的尺寸，类似于 Android 中的 match_parent 属性。这个插件在某些情况下非常有用，特别是当你需要让子组件完全填充父组件的空间时。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_match_parent 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_match_parent: ^0.0.1

然后运行 flutter pub get 来安装依赖。

使用

flutter_match_parent 提供了一个 MatchParent 组件，你可以将它包裹在子组件外部，从而使子组件的尺寸匹配父组件的尺寸。

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Match Parent Example')),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
          child: MatchParent(
            child: Container(
              color: Colors.red,
              child: Center(
                child: Text(
                  'This container matches the parent size',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，MatchParent 包裹了一个红色的 Container，使得这个 Container 的尺寸匹配父组件（蓝色的 Container）的尺寸。

自定义匹配方式

MatchParent 允许你选择只匹配宽度、只匹配高度，或者同时匹配宽度和高度。你可以通过 matchWidth 和 matchHeight 参数来控制：

MatchParent(
  matchWidth: true,  // 只匹配宽度
  matchHeight: false, // 不匹配高度
  child: Container(
    color: Colors.green,
    child: Center(
      child: Text(
        'This container matches the parent width only',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
),
回到顶部