时间戳

首页 > 解决方案 > Flutter 在抽认卡中隐藏/显示文本

flutter - Flutter 在抽认卡中隐藏/显示文本

问题描述

这是我的代码：

import 'package:flutter/material.dart';
import 'package:csv/csv.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:transformer_page_view/transformer_page_view.dart';

class Body extends StatefulWidget {
  @override
  _Body createState() => _Body();
}

class _Body extends State<Body> {
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    bool _visible = false;
    return FutureBuilder<String>(
        future: rootBundle.loadString('assets/files/questions.csv'),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<List<dynamic>> csvTable =
              CsvToListConverter().convert(snapshot.data);
          return Scaffold(
            appBar: AppBar(
              title: Text("Flashcards"),
            ),
            body: new TransformerPageView(
                loop: true,
                viewportFraction: 0.8,
                transformer: new PageTransformerBuilder(
                    builder: (Widget child, TransformInfo info) {
                  return new Padding(
                    padding: new EdgeInsets.all(10.0),
                    child: new Material(
                      elevation: 8.0,
                      textStyle: new TextStyle(color: Colors.white),
                      borderRadius: new BorderRadius.circular(10.0),
                      child: new Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          new Positioned(
                            child: new Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                ParallaxContainer(
                                  child: new Text(
                                    csvTable[info.index + 1][0],
                                    style: new TextStyle(
                                      fontSize: 24.0,
                                      color: Colors.black,
                                    ),
                                  ),
                                  position: info.position,
                                  translationFactor: 300.0,
                                ),
                                SizedBox(height: size.height * 0.05),
                                ParallaxContainer(
                                  child: FloatingActionButton(
                                    onPressed: () {
                                      // Call setState. This tells Flutter to rebuild the
                                      // UI with the changes.
                                      setState(() {
                                        _visible = !_visible;
                                      });
                                    },
                                    tooltip: 'Toggle Opacity',
                                    child: Icon(Icons.flip),
                                  ),
                                  position: info.position,
                                  translationFactor: 300.0,
                                ),
                                SizedBox(height: size.height * 0.05),
                                ParallaxContainer(
                                  child: AnimatedOpacity(
                                    // If the widget is visible, animate to 0.0 (invisible).
                                    // If the widget is hidden, animate to 1.0 (fully visible).
                                    opacity: _visible ? 1.0 : 0.0,
                                    duration: Duration(milliseconds: 500),
                                    // The green box must be a child of the AnimatedOpacity widget.
                                    child: new Text(
                                      csvTable[info.index + 1][1],
                                      style: new TextStyle(
                                        fontSize: 24.0,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ),
                                  position: info.position,
                                  translationFactor: 400.0,
                                ),
                              ],
                            ),
                            left: 10.0,
                            right: 10.0,
                            top: 100.0,
                          )
                        ],
                      ),
                    ),
                  );
                }),
                itemCount: csvTable.length - 1),
          );
        });
  }
}

excel文件中包含以下数据：

Question,
Command to sort lines of text files?,Answer 1
What does the 3rd column of /etc/fstab show?,Answer 2
Alternative name and location for grub.conf on some systems?,Answer 3
What the standard BASH file descriptors?,Answer 4

这个想法是，当我单击按钮时，答案会显示（抽认卡概念）。但是，单击按钮并没有做任何事情。求答案，我到处找，我知道可以使用可见性；但是，当我使用它时，我有同样的行为

标签： flutterflutter-layoutflutter-dependenciesflutter-animation

解决方案

我认为这是因为您的可见 bool 标志是在构建函数中声明的。所以每次 setState 时，可见标志都设置为 false。您可以将其作为全局布尔字段移动，然后它应该保留您单击按钮时所做的更改。

class _Body extends State<Body> {
bool _visible = false; ///Put it here

  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;        
    return FutureBuilder<String>(
        future: rootBundle.loadString('assets/files/questions.csv'),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<List<dynamic>> csvTable =
              CsvToListConverter().convert(snapshot.data);
          return Scaffold(
            appBar: AppBar(
              title: Text("Flashcards"),
            ),
            body: new TransformerPageView(
                loop: true,
                viewportFraction: 0.8,
                transformer: new PageTransformerBuilder(
                    builder: (Widget child, TransformInfo info) {
                  return new Padding(
                    padding: new EdgeInsets.all(10.0),
                    child: new Material(
                      elevation: 8.0,
                      textStyle: new TextStyle(color: Colors.white),
                      borderRadius: new BorderRadius.circular(10.0),
                      child: new Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          new Positioned(
                            child: new Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                ParallaxContainer(
                                  child: new Text(
                                    csvTable[info.index + 1][0],
                                    style: new TextStyle(
                                      fontSize: 24.0,
                                      color: Colors.black,
                                    ),
                                  ),
                                  position: info.position,
                                  translationFactor: 300.0,
                                ),
                                SizedBox(height: size.height * 0.05),
                                ParallaxContainer(
                                  child: FloatingActionButton(
                                    onPressed: () {
                                      // Call setState. This tells Flutter to rebuild the
                                      // UI with the changes.
                                      setState(() {
                                        _visible = !_visible;
                                      });
                                    },
                                    tooltip: 'Toggle Opacity',
                                    child: Icon(Icons.flip),
                                  ),
                                  position: info.position,
                                  translationFactor: 300.0,
                                ),
                                SizedBox(height: size.height * 0.05),
                                ParallaxContainer(
                                  child: AnimatedOpacity(
                                    // If the widget is visible, animate to 0.0 (invisible).
                                    // If the widget is hidden, animate to 1.0 (fully visible).
                                    opacity: _visible ? 1.0 : 0.0,
                                    duration: Duration(milliseconds: 500),
                                    // The green box must be a child of the AnimatedOpacity widget.
                                    child: new Text(
                                      csvTable[info.index + 1][1],
                                      style: new TextStyle(
                                        fontSize: 24.0,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ),
                                  position: info.position,
                                  translationFactor: 400.0,
                                ),
                              ],
                            ),
                            left: 10.0,
                            right: 10.0,
                            top: 100.0,
                          )
                        ],
                      ),
                    ),
                  );
                }),
                itemCount: csvTable.length - 1),
          );
        });
  }
}

推荐阅读