Flutter布局居中插件center_body的使用

Flutter布局居中插件center_body的使用

在Flutter开发中，有时我们需要在页面中央显示一个提示信息或图标，比如当列表为空时，显示“暂无数据”的提示。center_body 插件可以帮助我们快速实现这一功能。

特性

  • 基本小部件：带有消息和图标的中心小部件。
  • 典型用途：通常用于快速显示某种类型的列表视图为空的情况。

使用方法

以下是一个简单的示例，展示如何使用 center_body 插件来实现页面中央的提示效果。

示例代码

import 'package:flutter/material.dart';
import 'package:center_body/center_body.dart'; // 引入center_body插件

class CenterBodyExample extends StatelessWidget {
  const CenterBodyExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold( // 创建一个Scaffold作为根组件
      body: CenterBody( // 使用CenterBody小部件
        message: "暂无数据", // 设置提示信息
        icon: Icons.work_off_rounded, // 设置图标
      ),
    );
  }
}

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

1 回复

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


在Flutter中，Center 是一个常用的布局小部件，用于将其子部件居中显示在父部件的中心。虽然 Flutter 本身没有名为 center_body 的插件，但你可以通过使用 Center 小部件来实现类似的功能。

使用 Center 小部件

Center 小部件非常简单，它将其子部件居中显示在父部件的中心。以下是一个简单的示例，展示如何使用 Center 小部件将一个文本居中显示在屏幕上：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Center Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

自定义 center_body 小部件

如果你想要创建一个类似于 center_body 的自定义小部件，你可以将 Center 小部件封装在一个自定义的小部件中。以下是一个简单的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Center Body Example'),
        ),
        body: CenterBody(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

class CenterBody extends StatelessWidget {
  final Widget child;

  CenterBody({required this.child});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: child,
    );
  }
}
回到顶部