在 Flutter 上实现 TextSwitcher

Question

我没有在 Flutter 上找到任何 TextSwitcher。在 Android 上，TextSwitcher 通过添加淡出/淡入动画切换文本。在 Flutter 上有实现吗？我需要从头开始吗？如果是这样，您将如何实施？

这是一个参考： https://developer.android.com/reference/android/widget/TextSwitcher.html

Answer 1

Flutter 的 PageView 类提供与 Android TextSwitcher 大致相同的功能。

import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_database/firebase_database.dart';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {

  PageController _controller = new PageController();

  static const List<String> _kStrings = const <String>[
    'What is your name?',
    'I am a developer.',
    'What are you doing?',
    'Etc. etc...',
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Text Switcher Demo'),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.navigate_next),
        onPressed: () {
          Duration duration = const Duration(milliseconds: 300);
          Curve curve = Curves.easeOut;
          if (_controller.page == _kStrings.length - 1) {
            _controller.animateToPage(0, duration: duration, curve: curve);
          } else {
            _controller.nextPage(duration: duration, curve: curve);
          }
        },
      ),
      body: new PageView(
        controller: _controller,
        children: _kStrings.map((text) {
          return new Center(
            child: new Text(
              text,
              textAlign: TextAlign.center,
              style: Theme.of(context).textTheme.display2
            ),
          );
        }).toList(),
      ),
    );
  }
}