Flutter组件尺寸监听插件widget_size_observer的使用

Flutter组件尺寸监听插件widget_size_observer的使用

特性

该插件提供了一个可以监听其尺寸变化的组件，即使该组件处于离屏状态。

使用方法

import 'package:widget_size_observer/widget_size_observer.dart';

Widget build(BuildContext context) {
  Size? size;
  return WidgetSizeObserver(
    offstage: false,
    onSizeChanged: (size) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        setState(() {
          this.size = size;
        });
      });
    },
    child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit'),
  );
}

完整示例

import 'dart:math';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool offstage = false;
  String message = "";
  int line = 1;
  Size? size;

  [@override](/user/override)
  void initState() {
    super.initState();
    line = 3;
    message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n" * line;
  }

  void _incrementCounter() {
    setState(() {
      line = Random().nextInt(20);
      message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n" * line;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(children: [
          Text("TextSize = $size"),
          const Placeholder(fallbackHeight: 100,),
          if (true) WidgetSizeObserver(
            offstage: offstage,
            onSizeChanged: (size) {
              WidgetsBinding.instance.addPostFrameCallback((_) {
                setState(() {
                  this.size = size;
                });
              });
            },
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.deepOrange, width: 2),
              ),
              padding: const EdgeInsets.all(10),
              child: Text(message),
            ),
          ),
          const Placeholder(fallbackHeight: 100,),
        ],),
      ),
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            heroTag: "offstage",
            onPressed: () {
              setState(() {
                offstage = !offstage;
              });
            },
            child: const Icon(Icons.remove_red_eye),
          ),
          const SizedBox(height: 20,),
          FloatingActionButton(
            onPressed: _incrementCounter,
            child: const Icon(Icons.refresh),
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

更多关于Flutter组件尺寸监听插件widget_size_observer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter组件尺寸监听插件widget_size_observer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


widget_size_observer 是一个用于监听 Flutter 组件尺寸变化的插件。通过使用这个插件，你可以在组件的尺寸发生变化时得到通知，并执行相应的操作。以下是如何使用 widget_size_observer 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  widget_size_observer: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 widget_size_observer 包：

import 'package:widget_size_observer/widget_size_observer.dart';

3. 使用 WidgetSizeObserver

WidgetSizeObserver 是一个包装器组件，它可以监听其子组件的尺寸变化。你可以通过 onSizeChanged 回调来获取尺寸变化的信息。

以下是一个简单的示例：

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

class SizeObserverExample extends StatefulWidget {
  [@override](/user/override)
  _SizeObserverExampleState createState() => _SizeObserverExampleState();
}

class _SizeObserverExampleState extends State<SizeObserverExample> {
  Size _currentSize = Size.zero;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Size Observer Example'),
      ),
      body: Center(
        child: WidgetSizeObserver(
          onSizeChanged: (Size size) {
            setState(() {
              _currentSize = size;
            });
          },
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Size: ${_currentSize.width.toStringAsFixed(1)} x ${_currentSize.height.toStringAsFixed(1)}',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部