dart 按下按钮时在文本中显示按钮的值- Flutter

qni6mghb  于 2023-04-27  发布在  Flutter
关注(0)|答案(4)|浏览(138)

我想当任何键被按下,所以它应该显示在Text小部件(在数据的地方)[请参阅下面的图像]。例如1按下,所以1,然后我按下2,所以,它应该显示12,等等,然后,如果我按下呼叫结束(右下角按钮),所以,该字段应被清除。
Image is here
让我在下面添加代码

Column(
    [
     Text("data"),
     Row(
         mainAxisAlignment: MainAxisAlignment.spaceAround,
         children: [
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("1")),
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("2")),
                  GestureDetector(
                      onTap: () {},
                      child: defaultContainer("3")),
                ],
              ),
.........
     ],
    )
Widget defaultContainer(String value) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        boxShadow: const [BoxShadow(blurRadius: 5)],
        color: colors[random.nextInt(8)],
      ),
      child: Center(
          child: Text(
        value,
        style: const TextStyle(fontSize: 30),
      )),
    );
  }

霍普我可以解释

uujelgoq

uujelgoq1#

您可以通过声明一个变量来存储该数字并具有一个在按下时向该数字追加一个数字的函数来对此进行存档。
试试下面的代码片段:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(number),
            Wrap(
              alignment: WrapAlignment.center,
              children: [
                defaultContainer("1"),
                defaultContainer("2"),
                defaultContainer("3"),
                defaultContainer("4"),
                defaultContainer("5"),
                defaultContainer("6"),
                defaultContainer("7"),
                defaultContainer("8"),
                defaultContainer("9"),
                defaultContainer("0"),
                defaultContainer("0", isClear: true),
              ]
            )
          ],
        ),
      ),
    );
  }
  
  Widget defaultContainer(String value, {bool? isClear}) {
    return InkWell(
    onTap: (){
      setState((){
        if(isClear??false){
          number = "";
        } else {
          number += value;
        }
      });
    },
      child: Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        boxShadow: const [BoxShadow(blurRadius: 5)],
        color: Colors.white,
      ),
      child: Center(
          child: isClear??false?
        const Icon(Icons.call_end):
        Text(
        value,
        style: const TextStyle(fontSize: 30),
      )),
    )
    );
  }
}
6uxekuva

6uxekuva2#

您需要动态地给予“数据”。例如:

String inputValue = '';

你可以这样使用:

Column(
    children: [
      Text(inputValue),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '1';
              });
            },
            child: defaultContainer("1"),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '2';
              });
            },
            child: defaultContainer("2"),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                inputValue += '3';
              });
            },
            child: defaultContainer("3"),
          ),
        ],
      ),
      GestureDetector(
         onTap: () {
            if (inputValue.isNotEmpty) {
              setState(() {
                //if you want to clear one by one
                inputValue = _inputValue.substring(0, inputValue.length - 1);
                //if you want to clear all
                inputValue = "";
              });
            }
          },
          child: defaultContainer("end_icon"),
        ),
      ],
    ),
  ],
),
ef1yzkbh

ef1yzkbh3#

您可以使用String类型“data”来保存数据:当按号码键时,将值添加到列表中,当按呼叫结束键时,设置data = ''。

bmp9r5qi

bmp9r5qi4#

创建一个String变量:

String data = "data";

然后,确保你使用的是有状态类,并将其添加到onTap函数中:

setState((){
      data = "1"; 
      //2,3,4......,12 
      //do this for all and to clear just add empty string ""
    }):

相关问题