Flutter之RawMagnifier

用户通常需要帮助才能在移动设备上阅读小字，Android和iOS为了处理此问题当你长按文本时，屏幕上会显示一个放大镜，而Flutter也从Flutter 3.17版本开始内置了这种机制。

你能在可选文本上拖动手指，将会出现平台特有的放大镜。

万一你想改变设置，要怎么做呢？也许你希望用户能够调整方大镜的大小

或你想把放大镜变成有趣的形状

或你想要放大可选文本之外的UI元素

无论你有什么需求，RawMagnifier小部件都能使命必达

RawMagnifier({
    decoration: MagnifierDecoration(),
    focalPointOffset: Offset.zero,
    magnificationScaale: 1,
    size: Size(150, 150),
})

使用RawMagnifier小部件时，请将GestureDetector放在Stack中并使用它来保存拖动的位置详细信息，放大镜将出现在GestureDetector的子部件中

Stack(
    children: <Widget>[
        GestureDetector(
            onPanUpdate: _showMagnifier,
            child: WidgetToMagnifier(),
        ),
        // ...
    ]
)

接下来，将一个Positioned小部件添加到GestureDetector顶部的Stack中,并将其顶部和左侧参数设置为来自保存的拖动详细信息的Positioned

Stack(
    children: <Widget>[
        GestureDetector(
            onPanUpdate: _showMagnifier,
            child: WidgetToMagnify(),
        ),
        Positioned(
            left: dragGesturePosition.dx,
            top: dragGessturePosition,dy,
            child: ...
        ),
        // ...
    ]
),

最后，添加RawMagnifier小部件作为Positioned的孩子。

Stack(
    children: <Widget>[
        GestureDetector(
            onPanUpdate: _showMagnifier,
            child: WidgetToMagnify(),
        ),
        Positioned(
            left:dragGesturePosition.dx,
            top: dragGesturePosition.dy,
            child: RawMagnifier()
        ),
        // ...
    ]
),

现在，当你拖动要放大的小部件时，就会出现放大镜，你可以在用户停止拖动时更新状态来由条件地显示和隐藏放大镜。

Stack(
    children: <Widget>[
        GestureDetector(
            onPanUpdate: _showMagnifier,
            onPanEnd: _removeMagnifier,
            child: WidgetTToMagnifier(),
        ),
        if (_showMagnifier) Positioned(
            left: dragGesturePosition.dx,
            top: gragGesturePosition.dy,
            child: RawMagnifier(),
        ),
        // ...
    ],
),

你也可以通过不同方式自定义放大镜

RawMagnifier({
    decoration: MagnifierDecoration(),
    focalPointOffset: Offset.zero,
    magnificationScale: 1,
    size: Size(150, 150)
})

你可以通过size来调整大小，或你可以使用小部件本身的属性magnificationScale来调整放大比例。你可以使用MagnifierDecoration类将你的自定义提升到一个新的水平。

你可以更改形状、添加边框或更新放大镜的不透明度。

例如，你可以将StarBorder物件传递给shape参数使放大镜看起来很别致

RawMagnifier(
    decoration: MagnifierDecoration(
        opacity: 1,
        shape: StarBorder(
            side: BorderSize(color: Colors.transparent, width: 3),
        ),
    ),
    magnificationScale: 1,
    size: Size(150, 150),
)

而且就像调整Flutter的其他边框颜色一样你也可以调整放大镜边框的颜色

RawMagnifier(
    decoration: MagnifierDecoration(
        opacity: 1,
        shape: StarBorder(
            side: BorderSide(color: Colors.pink, width: 3),
        ),
    ),
    magnificationScale: 1,
    size: Size(150, 150),
),

你可以使用Flutter提供的任何其他形状边框类，或你可以编写自己的边框类使用你能想象到的任何一种形状。

有关RawMagnifier和所有其他软件包的更多信息，pub.dev

原文翻译自视频：视频地址