dart 用Flutter创建苹果iPhone计算器克隆

e0bqpujr  于 2023-03-27  发布在  Flutter
关注(0)|答案(1)|浏览(121)

我试图使苹果iPhone计算器的克隆。在用户界面我提取到其他文件的一些部件。这里是主要的。dart文件

import 'package:flutter/material.dart';

import 'widgets/grey_button.dart';
import 'widgets/yellow_button.dart';
import 'widgets/whte24_button.dart';

void main() {
  runApp(const MyApp());
}

void buttonPressed(String value){

  //TODO: change display text according to the value
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculator',
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(color: Colors.white),
          bodyMedium: TextStyle(color: Colors.white),
          bodySmall: TextStyle(color: Colors.white),
        ),
        primarySwatch: Colors.orange,
      ),
      home: const MyHomePage(title: "Calculator"),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String displayValue = "0";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          const SizedBox(
            height: 210,
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 35),
            height: 100,
            width: double.infinity,
            child: Text(
              displayValue,
              textAlign: TextAlign.end,
              style: TextStyle(fontSize: 50),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              GreyButton("AC"),
              GreyButton("+/-"),
              GreyButton("%"),
              YellowButton("÷")
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              White24Button("7"),
              White24Button("8"),
              White24Button("9"),
              YellowButton("x")
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              White24Button("4"),
              White24Button("5"),
              White24Button("6"),
              YellowButton("-")
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              White24Button("1"),
              White24Button("2"),
              White24Button("3"),
              YellowButton("+"),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
                height: 50,
                width: 140,
                decoration: BoxDecoration(
                    color: Colors.white24,
                    borderRadius: BorderRadius.circular(27)),
                child: const Text(
                  textAlign: TextAlign.start,
                  "0",
                  style: TextStyle(color: Colors.white, fontSize: 25),
                ),
              ),
              const White24Button("."),
              const YellowButton("+"),
            ],
          ),
        ],
      ),
    );
  }
}

在这段代码中,我想从其他dart文件调用buttonPressed函数。这个函数所做的是将displayValue更改为按钮的文本。我的问题是我应该在哪里正确定义这个函数。我应该在哪里做setState我完全是个新手。请帮助我
我试着把函数的定义改变成不同的类。我不知道什么是正确的逻辑方法,我对这个完全陌生。

t3irkdon

t3irkdon1#

添加一个回调到您的小部件按钮,例如:

Widget whitebutton({required String buttonName, required Function callback}){return Inkwell(ontap: callback, child: Text(buttonName));}

相关问题