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

的想法是,当我点击按钮的答案显示(抽认卡概念)。但是,单击按钮并没有做任何事情。请给我答案,我到处都看过了,我知道能见度是可以利用的;然而,当我使用它时,我有相同的行为

我认为这是因为您的可见bool标志在构建函数内声明。每次setState时,可视标志被设为false。你可以移动它作为一个全局bool字段,然后它应该保留你点击按钮时改变的内容。

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),
);
});
}
}