文案ok

lib/page/home/widget/quote_card.dart

@@ -1,4 +1,7 @@
+import 'package:animated_reorderable_list/animated_reorderable_list.dart';
 import 'package:flutter/material.dart';
+import 'package:plan/api/dto/daily_tip_dto.dart';
+import 'package:plan/api/endpoints/other.dart';
 import 'package:remixicon/remixicon.dart';
 
 class QuoteCard extends StatefulWidget {
@@ -9,8 +12,37 @@ class QuoteCard extends StatefulWidget {
 }
 
 class _QuoteCardState extends State<QuoteCard> {
+  List<DailyTipDto> _list = [];
+  int _currentIndex = 0;
+
+  ///获取当前语句
+  DailyTipDto? get currentTip => _list.isEmpty ? null : _list[_currentIndex];
+
+  @override
+  void initState() {
+    super.initState();
+    _init();
+  }
+
+  void _init() async {
+    var res = await getDailyTipList();
+    setState(() {
+      _list = res;
+    });
+  }
+
+  ///切换下一条
+  void _next() {
+    setState(() {
+      _currentIndex = (_currentIndex + 1) % _list.length;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
+    if (_list.isEmpty) {
+      return SizedBox();
+    }
     return Container(
       margin: EdgeInsets.only(top: 20),
       padding: const EdgeInsets.all(3),
@@ -30,26 +62,27 @@ class _QuoteCardState extends State<QuoteCard> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Text(
-              "每个教练都有什么特长？",
-              style: Theme.of(context).textTheme.titleSmall,
+            _fadeText(
+              currentTip?.title ?? "",
+              Theme.of(context).textTheme.titleSmall,
             ),
-            Container(
-              margin: EdgeInsets.only(top: 10),
-              child: Text(
-                "在主页点击教练可以查看介绍",
-                style: Theme.of(context).textTheme.labelMedium,
-              ),
+            SizedBox(height: 10),
+            _fadeText(
+              currentTip?.content ?? "",
+              Theme.of(context).textTheme.labelMedium,
             ),
-            Container(
-              margin: EdgeInsets.only(top: 10),
-              child: Row(
-                spacing: 5,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(RemixIcons.arrow_right_circle_line, size: 18),
-                  Text("下一条", style: Theme.of(context).textTheme.bodySmall),
-                ],
+            GestureDetector(
+              onTap: _next,
+              child: Container(
+                margin: EdgeInsets.only(top: 10),
+                child: Row(
+                  spacing: 5,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(RemixIcons.arrow_right_circle_line, size: 18),
+                    Text("Next", style: Theme.of(context).textTheme.bodySmall),
+                  ],
+                ),
               ),
             ),
           ],
@@ -57,4 +90,40 @@ class _QuoteCardState extends State<QuoteCard> {
       ),
     );
   }
+
+  ///渐变文字动画
+  Widget _fadeText(String text, TextStyle? style) {
+    return AnimatedSize(
+      duration: const Duration(milliseconds: 400),
+      child: Container(
+        alignment: Alignment.topLeft,
+        child: AnimatedSwitcher(
+          duration: const Duration(milliseconds: 400),
+          transitionBuilder: (Widget child, Animation<double> animation) {
+            return FadeTransition(
+              opacity: animation,
+              child: child,
+            );
+          },
+          layoutBuilder: (Widget? currentChild, List<Widget> previousChildren) {
+            return Stack(
+              children: <Widget>[
+                if (currentChild != null) currentChild, // 新 child
+                Positioned(
+                  top: 0,
+                  child: Opacity(
+                    opacity: 0.3,
+                    child: Column(
+                      children: previousChildren,
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+          child: Text(text, key: Key(text), style: style),
+        ),
+      ),
+    );
+  }
 }