如何建立一个扑动量屏幕？

Question

有没有人知道如何像下面的图片那样颤动地构建屏幕？

。

初始数字将从“ 0.00”开始，并且不断按数字键盘时会不断添加数字。

已更新。这是我根据Yamin提供的代码更改的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AddDigits(),
      ),
    );
  }
}

class AddDigits extends StatefulWidget {
  @override
  _AddDigitsState createState() => _AddDigitsState();
}

class _AddDigitsState extends State<AddDigits> {
  String _total = '0.00';
  String _tmp = '';

  addDigit(int value) {
    if (_tmp.indexOf('0') == 0) _tmp = _tmp.substring(1, _tmp.length);
    setState(() {
      _tmp += value.toString();
      if (_tmp.length == 1) _total = '0.0' + _tmp.toString();

      if (_tmp.length == 2) _total = '0.' + _tmp.toString();

      if (_tmp.length > 2) {
        _total = _tmp.substring(0, _tmp.length - 2) +
        '.' +
            _tmp.substring(_tmp.length - 2);
      }
    });
  }

  removeDigit() {
    var _tmpValue = _total;
    if (_tmpValue.length > 3) {
      var _fortmp = _tmpValue.substring(0, _tmpValue.length - 3) +
      _tmpValue.substring(_tmpValue.length - 2);
      _fortmp = _fortmp.substring(0, _fortmp.length - 1);
      _tmpValue = _fortmp.substring(0, _fortmp.length - 2) +
      '.' +
      _fortmp.substring(_fortmp.length - 2);
      setState(() {
        _total = _tmpValue;
        _tmp = _fortmp;
      });
    }

    if (_tmpValue.length == 3) {
      _tmpValue = _tmpValue.substring(_tmpValue.length - 2);
      setState(() {
        _total = '0.' + _tmpValue;
        if (_tmp == '00')
          _tmp = '';
        else
          _tmp = _tmpValue;
      });
   }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(image: backgroundImage),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Text("Total: " + _total.toString())],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              NumKey(
                value: 1,
                callBack: addDigit,
              ),
              NumKey(value: 2, callBack: addDigit),
              NumKey(value: 3, callBack: addDigit),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              NumKey(value: 4, callBack: addDigit),
              NumKey(value: 5, callBack: addDigit),
              NumKey(value: 6, callBack: addDigit),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              NumKey(value: 7, callBack: addDigit),
              NumKey(value: 8, callBack: addDigit),
              NumKey(value: 9, callBack: addDigit),
            ],
           ),
           Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
               Padding(
                padding: const EdgeInsets.all(8.0),
                child: MaterialButton(
                  child: Image.asset('assets/delete.png',
                      width: 25.0, height: 25.0),
                  onPressed: () => {removeDigit()},
                ),
               ),
              NumKey(value: 0, callBack: addDigit),
               Padding(
                padding: const EdgeInsets.all(8.0),
                child: MaterialButton(
                   child: Image.asset('assets/success.png',
                      width: 25.0, height: 25.0),
                  onPressed: () => {},
                ),
              ),
            ],
           )
        ],
       ),
    );
  }
}

class NumKey extends StatelessWidget {
  final int value;
  Function callBack;

  NumKey({@required this.value, @required this.callBack});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: MaterialButton(
        // backgroundColor: Colors.redAccent,
         child: Text(value.toString(),
            style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w400),
            textAlign: TextAlign.center),
         onPressed: () => {callBack(value)},
       ),
     );
   }
 }

上面的代码正在工作，但是我只是想知道还有什么更好的实现，因为我正在处理许多子字符串以使其工作。

我真的需要帮助。谢谢

Answer 1

有很多方法可以开发这种东西。我准备了一个主意，您可以在下面找到它：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AddDigits(),
      ),
    );
  }
}

class AddDigits extends StatefulWidget {
  @override
  _AddDigitsState createState() => _AddDigitsState();
}

class _AddDigitsState extends State<AddDigits> {
  int _total = 0;

  addDigit(int value) {
    setState(() {
      _total += value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[Text("Total: " + _total.toString())],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NumKey(
              value: 1,
              callBack: addDigit,
            ),
            NumKey(value: 2, callBack: addDigit),
            NumKey(value: 3, callBack: addDigit),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NumKey(value: 4, callBack: addDigit),
            NumKey(value: 5, callBack: addDigit),
            NumKey(value: 6, callBack: addDigit),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NumKey(value: 7, callBack: addDigit),
            NumKey(value: 8, callBack: addDigit),
            NumKey(value: 9, callBack: addDigit),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: FloatingActionButton(
                backgroundColor: Colors.redAccent,
                child: Text('<'),
                onPressed: () => {},
              ),
            ),
            NumKey(value: 0, callBack: addDigit),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: FloatingActionButton(
                backgroundColor: Colors.redAccent,
                child: Text('ok'),
                onPressed: () => {},
              ),
            ),
          ],
        )
      ],
    );
  }
}

class NumKey extends StatelessWidget {
  final int value;
  Function callBack;

  NumKey({@required this.value, @required this.callBack});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: FloatingActionButton(
        backgroundColor: Colors.redAccent,
        child: Text(value.toString()),
        onPressed: () => {callBack(value)},
      ),
    );
  }
}