我第一次在功能方面构建了一个 flutter 计算器应用程序，但介于两者之间的是下面的代码
import 'package:calculator/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calculator',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String output = '0';
/* String _privateOutput = "0"; */
/* double num1 = 0.0;
double num2 = 0.0;
String task = ""; */
Widget calculatorButton(String numberText) {
return Expanded(
child: MaterialButton(
onPressed: () {
setState(() {
numberText = output;
});
},
padding: EdgeInsets.all(24),
child: Text(
numberText,
style: kCalculatorStyle,
),
),
);
}
Widget calculatorButtonSymbols(String text) {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Text(
text,
style: kCalculatorStyleSymbols,
),
),
);
}
Widget calculatorButtonTopSymbols(String text) {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Text(
text,
style: kCalculatorStyleSymbols1,
),
),
);
}
Widget calculatorResetButton() {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Icon(
Icons.refresh,
size: 30,
),
),
);
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.white10,
statusBarIconBrightness: Brightness.dark,
),
);
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Column(
children: [
SafeArea(
child: Text(
output,
style: kCalculatorStyle,
),
),
Expanded(child: Divider()),
Column(
children: [
Row(
children: [
calculatorButtonTopSymbols('AC'),
calculatorButtonTopSymbols('+/-'),
calculatorButtonTopSymbols('%'),
calculatorButtonSymbols('/'),
],
),
Row(
children: [
calculatorButton('7'),
calculatorButton('8'),
calculatorButton('9'),
calculatorButtonSymbols('x'),
],
),
Row(
children: [
calculatorButton('4'),
calculatorButton('5'),
calculatorButton('6'),
calculatorButtonSymbols('-'),
],
),
Row(
children: [
calculatorButton('1'),
calculatorButton('2'),
calculatorButton('3'),
calculatorButtonSymbols('+'),
],
),
Row(
children: [
calculatorResetButton(),
calculatorButton('0'),
calculatorButton('.'),
calculatorButtonSymbols('='),
],
),
],
),
],
),
),
);
}
}
有人可以帮我吗？我想知道如何在按下数字键时更新屏幕“OUTPUT”上的数字
请帮帮我我真的很想学flutter！！
答案 0 :(得分：0)
您在 calculatorButton 中的代码被反转：
setState(() {
output += numberText;
});
通过这种方式，您将把 numberText 连接到 output。
答案 1 :(得分：0)
很简单。试试这个代码。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calculator',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String output = '0';
/* String _privateOutput = "0"; */
/* double num1 = 0.0;
double num2 = 0.0;
String task = ""; */
Widget calculatorButton(String numberText) {
return Expanded(
child: MaterialButton(
onPressed: () {
setState(() {
output= numberText;
});
},
padding: EdgeInsets.all(24),
child: Text(
numberText,
),
),
);
}
Widget calculatorButtonSymbols(String text) {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Text(
text,
),
),
);
}
Widget calculatorButtonTopSymbols(String text) {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Text(
text,
),
),
);
}
Widget calculatorResetButton() {
return Expanded(
child: MaterialButton(
onPressed: () {},
padding: EdgeInsets.all(24),
child: Icon(
Icons.refresh,
size: 30,
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Column(
children: [
SafeArea(
child: Text(
output,
),
),
Expanded(child: Divider()),
Column(
children: [
Row(
children: [
calculatorButtonTopSymbols('AC'),
calculatorButtonTopSymbols('+/-'),
calculatorButtonTopSymbols('%'),
calculatorButtonSymbols('/'),
],
),
Row(
children: [
calculatorButton('7'),
calculatorButton('8'),
calculatorButton('9'),
calculatorButtonSymbols('x'),
],
),
Row(
children: [
calculatorButton('4'),
calculatorButton('5'),
calculatorButton('6'),
calculatorButtonSymbols('-'),
],
),
Row(
children: [
calculatorButton('1'),
calculatorButton('2'),
calculatorButton('3'),
calculatorButtonSymbols('+'),
],
),
Row(
children: [
calculatorResetButton(),
calculatorButton('0'),
calculatorButton('.'),
calculatorButtonSymbols('='),
],
),
],
),
],
),
),
);
}
}
你在setState()中错了应该是这样的，output是我们更新的状态numberText是一个参数
onPressed: () {
setState(() {
output= numberText;
});
},
答案 2 :(得分：0)
正如其他人回答的那样，您的作业是错误的，这是正确的版本：
onPressed: () {
setState(() {
output= numberText;
});
},
但是，您需要考虑如何最好地处理不同按钮文本的不同逻辑。这是向每个按钮传递回调函数的方法的开始：
void digitPressed(String digit) {
String newOutput;
if (digit != '.') {
if (output == '0') {
newOutput = digit;
} else {
newOutput = output + digit;
}
} else if (!output.contains('.')) {
newOutput = output + digit;
}
setState(() {
output = newOutput;
});
}
然后所有的数字按钮都调用这个回调：
Widget calculatorButton(String numberText, Function digitPressed) {
return Expanded(
child: MaterialButton(
onPressed: () {
digitPressed(numberText);
},
它们是通过回调创建的：
Row(
children: [
calculatorButton('7', digitPressed),
calculatorButton('8', digitPressed),
calculatorButton('9', digitPressed),
calculatorButtonSymbols('x'),
],
),
到目前为止，我们对每个按钮都有相同的通用回调。当然，其他按钮需要不同的回调函数。
为了实现运算符，您需要记住运算符之前的先前输出。如果要实现运算符优先级，则需要一堆值。我相信你可以谷歌搜索计算器算法，祝你好运！