搜尋套件、儲存庫與 APP 分類

套件詳情v0.5.0

value_layout_builder

帶有額外值的 LayoutBuilder。當您希望在佈局過程中計算一個值並建立 widget 時,它非常有用。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
32.6萬
喜歡數
20
Pub 分數
150

安裝套件

flutter pub add value_layout_builder

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 LayoutBuilder 擴充功能,在佈局過程中提供額外的值。它讓元件能夠動態回應佈局約束,同時存取從這些約束中計算出的值。這對於需要同時考慮大小與自訂邏輯的響應式設計特別有用。該套件透過結合佈局感知與狀態化運算,增強了彈性,非常適合依賴於尺寸與計算資料的複雜 UI 元件。

適用情境

  • 使用計算值的響應式佈局
  • 基於約束的動態小部件大小調整
  • 需要佈局感知邏輯的複雜UI組件
  • 與佈局變更相關的自定義動畫
  • 使用內部邏輯建構可重用的佈局元件

主要特色

  • 將 LayoutBuilder 擴展為帶有額外值
  • 支援在佈局過程中進行動態值計算
  • 透過上下文感知邏輯實現響應式設計
  • 最小化樣板程式碼
  • 適用於所有 Flutter 平台

適合對象

  • 開發自適應使用者介面的開發者
  • 需要佈局上下文的 UI 組件創建者
  • 需要響應式和動態版面的專案
  • 使用功能或宣告式 UI 模式的團隊

使用建議

  • 需要理解 Flutter 的佈局階段
  • 可能為簡單佈局增加複雜性
  • 不適合靜態或非響應式設計
  • 如果值計算很重,效能影響
  • 僅限於佈局建構上下文中使用

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

value_layout_builder

Pub

A LayoutBuilder with an extra value. It's useful when you want to build a widget with a value computed during layout.

Features

  • ValueLayoutBuilder - The RenderBox version.
  • SliverValueLayoutBuilder - The RenderSliver version.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  value_layout_builder:

In your library add the following import:

import 'package:value_layout_builder/value_layout_builder.dart';

For help getting started with Flutter, view the online documentation.

Usage

ValueLayoutBuilder and SliverValueLayoutBuilder will pair with a custom RenderObject which accepts a one of them as a child.

For example it is used in flutter_sticky_header in order to know how much the header is hidden.

The typical usage is to expose a builder in the parameter of your widget's constructor which takes a BuildContext and the value you want to get from layout, and to pass it from your custom RenderObject.

The following code is a dumb example to show you how to use it:

class _Tester<T> extends SingleChildRenderObjectWidget {
  const _Tester({
    Key? key,
    required this.value,
    required Widget child,
  }) : super(key: key, child: child);

  final T value;

  @override
  _RenderTester<T> createRenderObject(BuildContext context) {
    return _RenderTester<T>(value: value);
  }

  @override
  void updateRenderObject(
    BuildContext context,
    _RenderTester<T> renderObject,
  ) {
    renderObject.value = value;
  }
}

class _RenderTester<T> extends RenderBox
    with RenderObjectWithChildMixin<RenderBox> {
  _RenderTester({
    required T value,
  }) : _value = value;

  T get value => _value;
  T _value;
  set value(T value) {
    if (_value != value) {
      _value = value;
      markNeedsLayout();
    }
  }

  @override
  void performLayout() {
    // We create a specific constraints with the value we want to pass to the builder.
    BoxValueConstraints<T> constraints = BoxValueConstraints<T>(
      constraints: this.constraints,
      value: value,
    );
    child.layout(constraints);
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.paintChild(child, offset);
  }
}

We can then use _Tester<T> like this:

_Tester<String>(
  value: 'test',
  child: ValueLayoutBuilder<String>(
    builder: (context, constraints) {
      // The constraints holds the String value.
      final String value = constraints.value;
      return Text(value);
    },
  ),
)

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

所屬分類

原始碼儲存庫

使用此套件的專案