如何在 flutter 中动态更改文本？
[英]How to change text dynamically in flutter?
问题描述
I am trying to create a simple counter which will have 2 buttons one to increase count and other to decrease it and a number displayed in between them.
我正在尝试创建一个简单的计数器，它将有 2 个按钮，一个用于增加计数，另一个用于减少计数，并在它们之间显示一个数字。
I am using this code.我正在使用此代码。
import 'package:expensewhat/main.dart';
import 'authorization3.dart';
import 'package:flutter/material.dart';
import 'custom_paint.dart';
import 'package:percent_indicator/percent_indicator.dart';
class NewTrip extends StatefulWidget {
@override
_NewTripState createState() => _NewTripState();
}
class _NewTripState extends State<NewTrip> {
int current = 2;
void decCurrent() {
if(current>2){
setState(() {
current = current - 1;
print(current);
});
}
}
void incCurrent() {
if(current<10){
setState(() {
current = current + 1;
print(current);
});
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: CustomPaint(
painter: Backcircles(),
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
Container(
margin: EdgeInsets.only(
top: 30.0,
),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'New Trip',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//select number of members
Row(
children: <Widget>[
Center(
child: Text('Select number of trip members'),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: CircularPercentIndicator(
radius: 130,
animation: true,
animationDuration: 1200,
lineWidth: 2,
percent: current/10,
center: Text(
current.toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Color(0xFFEEEEEE),
progressColor: Colors.blueAccent,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
onPressed: decCurrent,
child: Icon(Icons.remove),
),
SizedBox(
width: 10,
),
Text(
'$current',
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: incCurrent,
child: Icon(Icons.add),
),
],
),
SizedBox(height: 20,),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 40,
child: FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black,),
),
color: Color(0xFF03328A),
child: new Text('Continue',
style: new TextStyle(fontSize: 16.0, color: Colors.white)),
onPressed: () {
if(current == 2){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth2()),);
}
else if(current == 3){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth3()),);
}
else if(current == 4){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth4()),);
}
else if(current == 5){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth5()),);
}
else if(current == 6){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth6()),);
}
else if(current == 7){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth7()),);
}
else if(current == 8){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth8()),);
}
else if(current == 9){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth9()),);
}
else if(current == 10){
Navigator.push(context, MaterialPageRoute(builder: (context) => Auth10()),);
}
},
),
),
),
]
),
SizedBox(height: 20,),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 40,
child: FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black,),
),
color: Colors.white,
child: new Text('Back',
style: new TextStyle(fontSize: 16.0, color: Colors.black)),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => Page0()),);
},
),
),
),
]
),
],
)
],
),
),
],
),
),
],
),
),
),
),
);
}
}
The value of current is changing in console as I tap buttons, but it is not getting updated in the text widget.当我点击按钮时，当前的值在控制台中发生变化，但它没有在文本小部件中更新。 How can I fix that?我该如何解决？
1 个解决方案
解决方案1
0 2020-05-17 09:40:52
Hello this code is working:您好，此代码正在运行：
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(NewTrip());
}
class NewTrip extends StatefulWidget {
@override
_NewTripState createState() => _NewTripState();
}
class _NewTripState extends State<NewTrip> {
int current = 2;
void decCurrent() {
setState(() {
if (current > 2) {
current = current - 1;
print(current);
}
});
}
void incCurrent() {
setState(() {
if (current < 10) {
current = current + 1;
print(current);
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
onPressed: decCurrent,
child: Icon(Icons.remove),
),
SizedBox(
width: 10,
),
Text(
'$current',
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: incCurrent,
child: Icon(Icons.add),
),
],
),
),
),
);
}
}
You modified code is working here as well:您修改的代码也在这里工作：
import 'package:flutter/material.dart';
void main()
{
runApp(MaterialApp(home: NewTrip()));
}
class NewTrip extends StatefulWidget {
@override
_NewTripState createState() => _NewTripState();
}
class _NewTripState extends State<NewTrip> {
int current = 2;
void decCurrent() {
if(current>2){
setState(() {
current = current - 1;
print(current);
});
}
}
void incCurrent() {
if(current<10){
setState(() {
current = current + 1;
print(current);
});
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: ListView(
shrinkWrap: true,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'Expense',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
Text(
'What',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: 25.0,
),
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
Container(
margin: EdgeInsets.only(
top: 30.0,
),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'New Trip',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//select number of members
Row(
children: <Widget>[
Center(
child: Text('Select number of trip members'),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: CircularProgressIndicator(
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
onPressed: decCurrent,
child: Icon(Icons.remove),
),
SizedBox(
width: 10,
),
Text(
'$current',
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: incCurrent,
child: Icon(Icons.add),
),
],
),
SizedBox(height: 20,),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 40,
child: FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black,),
),
color: Color(0xFF03328A),
child: new Text('Continue',
style: new TextStyle(fontSize: 16.0, color: Colors.white)),
onPressed: () {}
),
),
),
]
),
SizedBox(height: 20,),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 40,
child: FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black,),
),
color: Colors.white,
child: new Text('Back',
style: new TextStyle(fontSize: 16.0, color: Colors.black)),
onPressed: () { }
),
),
),
]
),
],
)
],
),
),
],
),
),
],
),
),
),
);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter中如何动态改变文字颜色？ - How to change the color of text dynamically in Flutter?
flutter 如何在点击时动态改变文本颜色？ - flutter How to change text colour dynamically on tap?
Flutter：动态更改选项卡文本 - Flutter: Change Tab text dynamically
如何在 flutter 中动态更改卡片列表的文本颜色？ - How to change the color of text of a list of Cards dynamically in flutter?
如何使用 flutter 中的文本数量动态更改容器大小？ - How to dynamically change container size with text quantity in flutter?
如何在Flutter中动态更改initialValue - How to change dynamically a initialValue in Flutter
如何在Flutter中动态改变颜色？ - How to change color dynamically in Flutter?
变量不会在颤动中动态更改文本 - variable won't change Text dynamically in flutter
显示文本字符串并动态更改它 Flutter/Dart - Display a text string and change it dynamically Flutter/Dart
动态更改小部件的文本 flutter/dart - Change widget's text dynamically flutter/dart
相关标签