单击时如何在小部件周围添加高亮覆盖？

Question

我正在使用 Flutter 开发简单的设计系统。我想在选择（单击）时突出显示一个小部件，正如您在下面的图像中看到的那样，按钮在单击时突出显示。它有句柄和边框。

具有挑战性的部分：我不希望布局随着单击时由句柄和边框采取的额外 space 而改变。我想要widget，handle和border被覆盖，这样它就不会移动其他相邻widgets的位置。

选择后

Answer 1

由于 Clip.none 的 clipBehavior。

，您还可以使用 Stack 叠加层从 Stack 渗出

完整代码

只需将其复制粘贴到 DartPad 中即可查看实际效果。

import 'package:flutter/material.dart';

const kcPrimary = Color(0xFF001989);
const kcSecondary = Color(0xFF239689);

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Text('Blablablablabla'),
              Text('Blablablablabla'),
              Text('Blablablablabla'),
              PlayButton(),
              Text('Blablablablabla'),
              Text('Blablablablabla'),
              Text('Blablablablabla'),
            ],
          ),
        ),
      ),
    );
  }
}

class PlayButton extends StatefulWidget {
  const PlayButton({Key? key}) : super(key: key);

  @override
  State<PlayButton> createState() => _PlayButtonState();
}

class _PlayButtonState extends State<PlayButton> {
  bool clicked = false;
  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        InkWell(
          onTap: () => setState(() => clicked = !clicked),
          child: _mainButton,
        ),
        if (clicked) ...[
          Positioned.fill(
            child: IgnorePointer(
              child: _overlayBorder,
            ),
          ),
          Positioned(
            top: -20.0,
            left: 0,
            child: _overlayTitle,
          ),
          Positioned(top: 0, right: 0, child: _corner),
          Positioned(bottom: 0, right: 0, child: _corner),
          Positioned(bottom: 0, left: 0, child: _corner),
          Positioned(top: 0, left: 0, child: _corner),
        ],
      ],
    );
  }

  Widget get _mainButton => Container(
        width: 80.0,
        height: 40.0,
        decoration: BoxDecoration(
            border: Border.all(
              color: kcPrimary,
              width: 3.0,
            ),
            borderRadius: const BorderRadius.all(Radius.circular(12))),
        child: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Icon(Icons.play_arrow),
              Text('Play'),
            ],
          ),
        ),
      );

  Widget get _overlayBorder => Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: kcSecondary,
            width: 3.0,
          ),
        ),
      );

  Widget get _corner => Container(width: 10, height: 10, color: kcSecondary);

  Widget get _overlayTitle => Container(
        height: 20.0,
        width: 48.0,
        color: kcSecondary,
        alignment: Alignment.center,
        child: const Text(
          'Button',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
            fontWeight: FontWeight.bold,
          ),
        ),
      );
}

单击时如何在小部件周围添加高亮覆盖？

How to add highlight overlay around the widget upon click?

user-interface

ui-design

dart

flutter

完整代码