Question

我有点迷失在Flutter上创造互动性。

我试图点击FlatButtons上面显示的值，并按照它被点击的顺序。

例如，点击数字1，然后是2,1,1,1和最后2应该出现$ 12111，记住一个列表。

点击退格图标会删除已输入列表的最后一个数字。

我不知道在类之间产生这种通信。

你能帮帮我吗？我试图使用StatefulWidget，但我没有成功。

下面我留下了生成上述屏幕的代码。

main.dart

import "package:flutter/material.dart";

void main() {
  runApp(new KeyboardApp());
}

class KeyboardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView  (
        children: <Widget>[
          new Number(),
          new Keyboard(),
        ],
      ),
    );
  }  
}

class NumberState extends StatefulWidget {
  NumberList createState() => new NumberList();
}

class NumberList extends State<NumberState> {
  List<String> numbers = <String>[];
  String number;

  @override
  Widget build(BuildContext context) {
    number = this.numbers.join('');
    return new Text(
      this.number,
      style: new TextStyle(
        fontFamily: 'Roboto',
        color: new Color(0xFFFFFFFF),
        fontSize: 45.0
      )
    ); 
  }
}

class Number extends StatelessWidget {
  final Color color = new Color(0xFFE57373);

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 145.0,
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            padding: new EdgeInsets.only(right: 16.0, top: 35.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new Text(
                  '\$  ',
                  style: new TextStyle(
                    fontFamily: 'Roboto',
                    color: new Color(0xFFFFFFFF),
                    fontSize: 20.0
                  )
                ),
                new NumberState(),
              ],
            )
          )
        ],
      ),
      color: color,
    );
  }
}

class Keyboard extends StatelessWidget {
  final Color color = new Color(0xFFE57373);

  var list = new NumberList().numbers;
  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.only(right: 15.0, left: 15.0, top: 47.0, bottom: 20.0),
      child: new Column(
        children: <Widget>[
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new FlatButton(
                textColor: color,
                child: new Text(
                  '1',
                  style: new TextStyle(
                    fontSize: 35.0
                  ),
                ),
                onPressed: () {
                  this.list.add('1');
                },
              ),
              new FlatButton(
                textColor: color,
                child: new Text(
                  '2',
                  style: new TextStyle(
                    fontSize: 35.0
                  ),
                ),
                onPressed: () {
                  this.list.add('2');
                },
              ),
              new FlatButton(
                textColor: color,
                child: new Icon(
                  Icons.backspace,
                  size: 35.0
                ),
                onPressed: () {
                  this.list.removeLast();
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

查看Flutter interactivity tutorial。在高级别（heh），您的问题是您正试图在窗口小部件树的叶子中存储状态。你应该把你的州存放在你的树上，然后把它传给孩子们。

以下示例使用ValueNotifier，但您也可以使用流，回调甚至Firebase Database传递状态。

import "package:flutter/material.dart";

void main() {
  runApp(new KeyboardApp());
}

class KeyboardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  ValueNotifier<List<int>> numbers = new ValueNotifier<List<int>>(<int>[]);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView  (
        children: <Widget>[
          new NumberDisplay(numbers: numbers),
          new Keyboard(numbers: numbers),
        ],
      ),
    );
  }
}

class NumberDisplay extends AnimatedWidget {
  NumberDisplay({ this.numbers }) : super(listenable: numbers);
  final ValueNotifier<List<int>> numbers;

  final Color _color = new Color(0xFFE57373);

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 145.0,
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Container(
            padding: new EdgeInsets.only(right: 16.0, top: 35.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new Text(
                  '\$  ',
                  style: new TextStyle(
                    fontFamily: 'Roboto',
                    color: new Color(0xFFFFFFFF),
                    fontSize: 20.0
                  )
                ),
                new Text(
                  this.numbers.value.join(''),
                  style: new TextStyle(
                    fontFamily: 'Roboto',
                    color: new Color(0xFFFFFFFF),
                    fontSize: 45.0
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      color: _color,
    );
  }
}

class Keyboard extends StatelessWidget {
  Keyboard({ this.numbers });
  final ValueNotifier<List<int>> numbers;

  final Color _color = new Color(0xFFE57373);

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.only(right: 15.0, left: 15.0, top: 47.0, bottom: 20.0),
      child: new Column(
        children: <Widget>[
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new FlatButton(
                textColor: _color,
                child: new Text(
                  '1',
                  style: new TextStyle(
                    fontSize: 35.0
                  ),
                ),
                onPressed: () {
                  numbers.value = new List.from(numbers.value)..add(1);
                },
              ),
              new FlatButton(
                textColor: _color,
                child: new Text(
                  '2',
                  style: new TextStyle(
                    fontSize: 35.0
                  ),
                ),
                onPressed: () {
                  numbers.value = new List.from(numbers.value)..add(2);
                },
              ),
              new FlatButton(
                textColor: _color,
                child: new Icon(
                  Icons.backspace,
                  size: 35.0
                ),
                onPressed: () {
                  numbers.value = new List.from(numbers.value)..removeLast();
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

颤振 - 在应用程序交互中生成

1 个答案: