我写了一些代码，每次按下添加按钮时都会打开一个新容器。这些容器中的每一个都打开了RPage（如果您不理解，请检查代码）。
码：
import 'package:flutter/material.dart';
import 'dart:io';
void main() => runApp(MainPage());
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home:Scaffold (
backgroundColor: Colors.white,
body: Column (
children: <Widget> [
Container (
height: 100.0
),
Body(),
]
)
)
);
}
}
class Body extends StatefulWidget {
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
final String open1 = 'open';
int count = 1;
@override
Widget build(BuildContext context) {
return Expanded (
child: Container (
child: NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: PageView.builder(
reverse: true,
pageSnapping: false,
controller: PageController(viewportFraction: 0.85),
itemCount: count,
itemBuilder: (context, i) {
if (i == 0) {
return GestureDetector (
onTap: () {
Navigator.push(
context,
MaterialPageRoute (
builder: (context) => RPage (
open: open1,
)
),
);
count++;
},
child: Hero (
tag: open1,
child: Padding (
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.015,
right: MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom: MediaQuery.of(context).size.width * 0.15
),
child: Material (
borderRadius: BorderRadius.circular(40.0),
color: Colors.white,
elevation: 8.0,
child: InkWell (
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Icon (
Icons.add,
size: 30.0,
color: Colors.black,
)
]
),
)
)
)
)
);
}
else {
return RCard(i);
}
}
)
)
)
);
}
}
class RCard extends StatefulWidget {
final int count;
RCard(this.count);
@override
RCardState createState() => RCardState();
}
class RCardState extends State<RCard> {
int count;
String open2;
@override
void initState() {
super.initState();
count = widget.count;
open2 = 'open$count';
}
@override
Widget build(BuildContext context) {
return Hero (
tag: open2,
child: GestureDetector (
onTap: () {
Navigator.push(
context,
MaterialPageRoute (
builder: (context) => RPage (
open: open2,
)
),
);
},
child: Padding (
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.015,
right: MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom: MediaQuery.of(context).size.width * 0.15
),
child: Material (
borderRadius: BorderRadius.circular(40.0),
color: Colors.white,
elevation: 8.0,
)
)
),
);
}
}
class RPage extends StatelessWidget {
final String open;
RPage({this.open});
@override
Widget build(BuildContext context) {
return GestureDetector (
child: Hero (
tag: open,
child: Material (
child: Container (
color: Colors.white,
child: Center (
child: RBody()
)
)
)
),
onTap: () {
Navigator.pop(context);
},
);
}
}
class Constants {
static const String add = 'Add';
static const List<String> choices = <String>[
add
];
}
class RBody extends StatefulWidget {
@override
RBodyState createState() => RBodyState();
}
class RBodyState extends State<RBody> {
final String open1 = 'open';
static bool platform;
static int count = 1;
@override
Widget build(BuildContext context) {
if (Platform.isIOS) {
platform = true;
}
if (Platform.isAndroid) {
platform = false;
}
return Column (
children: <Widget> [
Container (
height: MediaQuery.of(context).size.height * 0.15,
width: MediaQuery.of(context).size.width * 1.0,
child: Row (
children: <Widget> [
Expanded (
child: Container (
alignment: Alignment(-0.9, 1.0),
child: IconButton (
iconSize: 15.0,
icon: Icon (Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
)
),
),
Expanded (
child: Container (
alignment: Alignment(0.9, 1.0),
child: platform ? RotatedBox (
quarterTurns: 1,
child: PopupMenuButton<String> (
onSelected: (_) {
setState(() {
count ++;
});
},
itemBuilder: (BuildContext context) {
return Constants.choices.map(
(String choice) {
return PopupMenuItem<String> (
value: choice,
child: Text(choice)
);
}
).toList();
},
)
) :
PopupMenuButton<String> (
onSelected: (_) {
setState(() {
count ++;
});
},
itemBuilder: (BuildContext context) {
return Constants.choices.map(
(String choice) {
return PopupMenuItem<String> (
value: choice,
child: Text(choice)
);
}
).toList();
},
)
)
)
]
),
),
Title(),
Padding (
padding: EdgeInsets.symmetric(
vertical: platform ? 10.0 : 30.0
),
),
Expanded (
child: Align (
alignment: Alignment.topCenter,
child: Container (
height: MediaQuery.of(context).size.height * 0.34,
width: MediaQuery.of(context).size.height * 1.0,
child: RList()
)
)
)
]
);
}
}
class RList extends StatefulWidget {
@override
RListState createState() => RListState();
}
class RListState extends State<RList> {
@override
Widget build(BuildContext context) {
return NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: ListView.builder(
controller: PageController(viewportFraction: 0.85),
itemCount: RBodyState.count,
itemBuilder: (context, i) {
if (i == 0) {
return Container();
} else {
return Cell(i);
}
}
)
);
}
}
class Title extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container (
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width * 1.0,
child: Align (
alignment: Alignment.bottomCenter,
child: Material (
color: Colors.white,
child: Text (
'T I T L E',
style: TextStyle (
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
)
)
)
);
}
}
class Cell extends StatefulWidget {
final int count;
Cell(this.count);
@override
CellState createState() => CellState();
}
class CellState extends State<Cell> {
@override
Widget build(BuildContext context) {
return Column (
children: <Widget> [
Material (
color: Colors.white,
child: Text (
'T E X T',
style: TextStyle (
fontSize: 12.0,
fontWeight: FontWeight.bold,
),
)
),
Padding (
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height * 0.025
),
),
]
);
}
}
每次按下弹出菜单按钮时，RPage都会创建新文本。但我期待只在该特定页面上添加文本。但是，我发现我的代码在每一页上添加了文本。如何才能仅在一个特定页面上添加文本？
好吧，如果你根本没有意识到减少了什么。在开始时看起来有点过于复杂，但是如果你在看之前学习redux，那么你会发现这很容易在redux中管理状态而不会让你的代码变得复杂。但你必须制作更多的文件来保持代码的有序性。我已经在github上传了代码链接到这里你可以克隆该项目并尝试自己Redux Card Example
问题出在这里：在你的RBodyState类中
static int count = 1;
由于您的count变量是静态的，因此所有实例都具有相同的count值，因此您的所有页面都具有相同数量的'T I T L E'。
使用以下代码：
import 'package:flutter/material.dart';
import 'dart:io';
void main() => runApp(MainPage());
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home:Scaffold (
backgroundColor: Colors.white,
body: Column (
children: <Widget> [
Container (
height: 100.0
),
Body(),
]
)
)
);
}
}
class Body extends StatefulWidget {
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
final String open1 = 'open';
int count = 1;
@override
Widget build(BuildContext context) {
return Expanded (
child: Container (
child: NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: PageView.builder(
reverse: true,
pageSnapping: false,
controller: PageController(viewportFraction: 0.85),
itemCount: count,
itemBuilder: (context, i) {
if (i == 0) {
return GestureDetector (
onTap: () {
Navigator.push(
context,
MaterialPageRoute (
builder: (context) => RPage (
open: open1,
)
),
);
count++;
},
child: Hero (
tag: open1,
child: Padding (
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.015,
right: MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom: MediaQuery.of(context).size.width * 0.15
),
child: Material (
borderRadius: BorderRadius.circular(40.0),
color: Colors.white,
elevation: 8.0,
child: InkWell (
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Icon (
Icons.add,
size: 30.0,
color: Colors.black,
)
]
),
)
)
)
)
);
}
else {
return RCard(i);
}
}
)
)
)
);
}
}
class RCard extends StatefulWidget {
final int count;
RCard(this.count);
@override
RCardState createState() => RCardState();
}
class RCardState extends State<RCard> {
int count;
String open2;
@override
void initState() {
super.initState();
count = widget.count;
open2 = 'open$count';
}
@override
Widget build(BuildContext context) {
return Hero (
tag: open2,
child: GestureDetector (
onTap: () {
Navigator.push(
context,
MaterialPageRoute (
builder: (context) => RPage (
open: open2,
)
),
);
},
child: Padding (
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.015,
right: MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom: MediaQuery.of(context).size.width * 0.15
),
child: Material (
borderRadius: BorderRadius.circular(40.0),
color: Colors.white,
elevation: 8.0,
)
)
),
);
}
}
class RPage extends StatelessWidget {
final String open;
RPage({this.open});
@override
Widget build(BuildContext context) {
return GestureDetector (
child: Hero (
tag: open,
child: Material (
child: Container (
color: Colors.white,
child: Center (
child: RBody()
)
)
)
),
onTap: () {
Navigator.pop(context);
},
);
}
}
class Constants {
static const String add = 'Add';
static const List<String> choices = <String>[
add
];
}
class RBody extends StatefulWidget {
@override
RBodyState createState() => RBodyState();
}
class RBodyState extends State<RBody> {
final String open1 = 'open';
static bool platform;
int count = 1;
@override
Widget build(BuildContext context) {
if (Platform.isIOS) {
platform = true;
}
if (Platform.isAndroid) {
platform = false;
}
return Column (
children: <Widget> [
Container (
height: MediaQuery.of(context).size.height * 0.15,
width: MediaQuery.of(context).size.width * 1.0,
child: Row (
children: <Widget> [
Expanded (
child: Container (
alignment: Alignment(-0.9, 1.0),
child: IconButton (
iconSize: 15.0,
icon: Icon (Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
)
),
),
Expanded (
child: Container (
alignment: Alignment(0.9, 1.0),
child: platform ? RotatedBox (
quarterTurns: 1,
child: PopupMenuButton<String> (
onSelected: (_) {
setState(() {
count ++;
});
},
itemBuilder: (BuildContext context) {
return Constants.choices.map(
(String choice) {
return PopupMenuItem<String> (
value: choice,
child: Text(choice)
);
}
).toList();
},
)
) :
PopupMenuButton<String> (
onSelected: (_) {
setState(() {
count ++;
});
},
itemBuilder: (BuildContext context) {
return Constants.choices.map(
(String choice) {
return PopupMenuItem<String> (
value: choice,
child: Text(choice)
);
}
).toList();
},
)
)
)
]
),
),
Title(),
Padding (
padding: EdgeInsets.symmetric(
vertical: platform ? 10.0 : 30.0
),
),
Expanded (
child: Align (
alignment: Alignment.topCenter,
child: Container (
height: MediaQuery.of(context).size.height * 0.34,
width: MediaQuery.of(context).size.height * 1.0,
child: RList(count)
)
)
)
]
);
}
}
class RList extends StatefulWidget {
int count;
RList(this.count);
@override
RListState createState() => RListState();
}
class RListState extends State<RList> {
@override
Widget build(BuildContext context) {
return NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: ListView.builder(
controller: PageController(viewportFraction: 0.85),
itemCount: widget.count,
itemBuilder: (context, i) {
if (i == 0) {
return Container();
} else {
return Cell(i);
}
}
)
);
}
}
class Title extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container (
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width * 1.0,
child: Align (
alignment: Alignment.bottomCenter,
child: Material (
color: Colors.white,
child: Text (
'T I T L E',
style: TextStyle (
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
)
)
)
);
}
}
class Cell extends StatefulWidget {
final int count;
Cell(this.count);
@override
CellState createState() => CellState();
}
class CellState extends State<Cell> {
@override
Widget build(BuildContext context) {
return Column (
children: <Widget> [
Material (
color: Colors.white,
child: Text (
'T E X T',
style: TextStyle (
fontSize: 12.0,
fontWeight: FontWeight.bold,
),
)
),
Padding (
padding: EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height * 0.025
),
),
]
);
}
}