Flutter에서 CompositedTransformFollower 클래스를 사용하는 방법은 무엇입니까?

Flutter에서 오버레이의 스택에 추가하면 다른 위젯 위에 시각적 구성 요소를 인쇄할 수 있습니다.

OverlayEntry를 사용하여 위젯이 오버레이에 추가되고 오버레이 내의 항목 위치는 Positioned 및 AnimatedPositioned을 사용하여 선택됩니다.

회사는 포털에서 쉽게hire Flutter developers 고객을 위한 원활한 비즈니스 애플리케이션을 구축하기 위해 애플리케이션에 대해 다음 위젯을 구현할 수 있습니다. 추가 지원은 개발자에게 문의하십시오.

스택 위젯과 마찬가지로 다른 위젯 위에 표시할 항목이 필요할 때 유용합니다. 그러나 전체 코드베이스를 변경하지 않고 어디에서나 이 위젯을 사용할 수 있습니다.

CompositedTransformTarget, CompositedTransformWidget, LayerLink, Overlay 및 OverlayEntry 위젯을 사용하여 이 작업을 수행할 수 있습니다.

다음은 CompositedTransformFollower 클래스의 생성자입니다.

    CompositedTransformFollower({
Key? Key,
required LayerLink link,
bool showWhenUnlinked = true,
Offset offset = Offset.zero,
Alignment targetAnchor = Alignment.topLeft,
Alignment followerAnchor = Alignment.topLeft,
Widget? child}
)

LayerLink 링크: 이 CompositedTransformFollower는 링크 개체에 의해 CompositedTransformTarget에 연결됩니다.

Bool showWhenUnlinked: showWhenUnlinked가 true이면 자식이 표시되고 위젯이 연결되지 않은 경우 재배치되지 않습니다. 거짓이면 자식이 숨겨집니다.

오프셋: 이 위젯의 ​​후속 앵커 위치를 결정하려면 연결된 CompositedTransformTarget의 대상 앵커에 추가 오프셋을 추가해야 합니다.

Alignment targetAnchor: followerAnchor가 연결된 CompositedTransformTarget에서 자체적으로 앵커로 정렬되는 위치입니다.

Alignment followerAnchor: 위젯의 앵커 포인트는 연결된 CompositedTransformTarget의 followerAnchor와 정렬됩니다.

위젯? child: 이 위젯에는 자식이 하나만 있을 수 있습니다. Row, Column, Stack과 같은 자식 속성을 가진 위젯을 이 위젯의 ​​자식으로 허용하여 수많은 자식을 배치합니다. 그런 다음 아이들에게 위젯을 제공합니다.

오버레이 항목이 오버레이 스택에 없는 "대상"을 따라야 할 때 위젯을 함께 "접착"하려면 CompositedTransformTarget, CompositedTransformFollower 및 LayerLink를 사용하십시오. 이를 달성하려면 다음을 수행해야 합니다.

오버레이에서 위젯을 래핑하려면 CompositedTransformFollower를 사용해야 합니다.

CompositedTransformTarget의 자손은 팔로워여야 합니다.

대상 위젯을 포함하려면 CompositedTransformTarget을 사용해야 합니다.

추종자와 대상은 LayerLink 인스턴스로 함께 결합됩니다.

예시:

import 'package:flutter/material.dart';
void main() {
  runApp(const MaterialApp(home: Slide()));
}
class Slide extends StatefulWidget {
  const Slide({Key? key}) : super(key: key);
  @override
  _SlideState createState() => _SlideState();
}
class _SlideState extends State {
  final double indicatorWidth = 24.0;
  final double indicatorHeight = 300.0;
  final double slideHeight = 200.0;
  final double slideWidth = 400.0;
  final LayerLink layerLink = LayerLink();
  OverlayEntry? overlayEntry;
  Offset indicatorOffset = const Offset(0, 0);
  Offset getIndicatorOffset(Offset dragOffset) {
    final double x = (dragOffset.dx - (indicatorWidth / 2.0))
        .clamp(0.0, slideWidth - indicatorWidth);
    final double y = (slideHeight - indicatorHeight) / 2.0;
    return Offset(x, y);
  }
  void showIndicator(DragStartDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry = OverlayEntry(
      builder: (BuildContext context) {
        return Positioned(
          top: 0.0,
          left: 0.0,
          child: SizedBox(
              width: indicatorWidth,
              height: indicatorHeight,
              child: CompositedTransformFollower(
                offset: indicatorOffset,
                link: layerLink,
                child: Container(
                  color: Colors.blue,
                ),
              )),
        );
      },
    );
    Overlay.of(context)?.insert(overlayEntry!);
  }
  void updateIndicator(DragUpdateDetails details) {
    indicatorOffset = getIndicatorOffset(details.localPosition);
    overlayEntry?.markNeedsBuild();
  }
  void hideIndicator(DragEndDetails details) {
    overlayEntry?.remove();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Overlay Indicator')),
      body: Center(
        child: CompositedTransformTarget(
          link: layerLink,
          child: Container(
            width: slideWidth,
            height: slideHeight,
            color: Colors.blue.withOpacity(0.2),
            child: GestureDetector(
              onPanStart: showIndicator,
              onPanUpdate: updateIndicator,
              onPanEnd: hideIndicator,
            ),
          ),
        ),
      ),
    );
  }
}

산출

결론

오버레이를 사용하고 위젯을 연결하는 것은 다른 위젯 위에 위젯을 띄우는 사용자 인터페이스(UI)를 개발하기 위한 쉽고 효과적인 전략입니다. 이 기사에서 이러한 위젯을 LayerLink와 결합하는 방법을 발견했습니다.