在Flutter中，在不涉及影片小部件的情況下，讓容器閃爍一次的最簡單、最簡單的方法是什么？

想象一下 Facebook 移動應用程式，您可以在其中點擊有關某人喜歡您的評論的通知。該應用程式會打開相應的螢屏，向下滾動到評論，到達那里后，評論行會閃爍黃色一段時間，然后快速變為透明，然后就完成了。

我只想為 ListView/Column 元素制作相同的閃爍影片，讓用戶知道由于他們的操作而發生了某些事情。但從我收集到的資訊來看，要創建一個像這樣的簡單影片需要一個帶有影片小部件的復雜精巧裝置。

有一個小部件可以執行非常受歡迎的淡入淡出影片，稱為 FadeInImage。我只需要提供目標 URL、占位符影像資產，其余的小部件將處理。我想知道是否有這樣的選擇，我可以只提供一個小部件的密鑰，然后從任何地方呼叫：rowKey.currentState.flash(color: Colors.yellow). 或者也許是一種讓我告訴 ListView 或 Column 閃爍某些行的方法，例如listViewKey.currentState.items[5].flash(color: Colors.yellow).

uj5u.com熱心網友回復：

沒有您正在尋找的 Widget，但如果您了解 Flutter 基礎知識，則可以創建自定義 Widget。您將能夠從簡單的影片構建到最高級的影片。

我做了一個簡單的例子，一個元素串列，你可以從串列中選擇任何元素（索引）。

當你打開螢屏時，你會看到滾動影片，然后開始閃爍影片。

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

  void _goToWidget(BuildContext context, int index) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => FlashingList(index: index),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MaterialButton(
              color: Colors.greenAccent,
              child: const Text('Go to element 5'),
              onPressed: () => _goToWidget(context, 5),
            ),
            MaterialButton(
              color: Colors.greenAccent,
              child: const Text('Go to element 10'),
              onPressed: () => _goToWidget(context, 10),
            ),
          ],
        ),
      ),
    );
  }
}

class FlashingList extends StatefulWidget {
  const FlashingList({required this.index, Key? key}) : super(key: key);

  final int index;

  @override
  State<FlashingList> createState() => _FlashingListState();
}

class _FlashingListState extends State<FlashingList>
    with SingleTickerProviderStateMixin {
  final _scrollController = ScrollController();
  late final AnimationController _animationController;
  final _itemSize = 150.0;
  Timer? _timer;

  Future<void> _startScrolling() async {
    await _scrollController.animateTo(
      _itemSize * widget.index,
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
    );
    // after the scroll animation finishes, start the blinking
    _animationController.repeat(reverse: true);
    // the duration of the blinking
    _timer = Timer(const Duration(seconds: 3), () {
      setState(() {
        _animationController.stop();
        _timer?.cancel();
      });
    });
  }

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    WidgetsBinding.instance!.addPostFrameCallback((_) => _startScrolling());
    super.initState();
  }

  @override
  void dispose() {
    _timer?.cancel();
    _animationController.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flashing List'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 15,
        itemExtent: 150,
        itemBuilder: (context, index) {
          final item = Padding(
            padding: const EdgeInsets.all(20.0),
            child: Text('My Item :$index'),
          );
          return Padding(
            padding: const EdgeInsets.all(4.0),
            child: FittedBox(
              child: index == widget.index && _animationController.isDismissed
                  ? FadeTransition(
                      opacity: _animationController,
                      child: Container(
                        color: Colors.yellow,
                        child: item,
                      ),
                    )
                  : Container(
                      color: Colors.grey[200],
                      child: item,
                    ),
            ),
          );
        },
      ),
    );
  }
}

結果：

現在您知道如何創建一個自動滾動串列、影片專案，您可以使用更復雜的影片對其進行自定義，并將其提取到您可以在專案中重復使用的自定義小部件中。

參考：

標籤：扑 动画

上一篇：Selenium/python點擊??打開多行

下一篇：JavaScript的查找功能