Flutter - 如何通过单击按钮添加行

Question

我希望在单击“+添加行”按钮时添加 6 个球行（请参阅此 image），但我有一个问题是我不确定它是否有像我编码的 Listview。 请帮助我完成 'void addRow()' 以通过单击按钮添加一行。

您能否给我一些提示，说明如何获得与其他行完全不同的随机数的新行？

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'dart:math';
import 'package:barcode_scan/barcode_scan.dart';

void main() => runApp(
      MaterialApp(
        home: BallPage()
      ),
    );

class BallPage extends StatefulWidget {
  @override
  _BallPageState createState() => _BallPageState();
}

class _BallPageState extends State<BallPage>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      drawer: new Drawer(),
      appBar: AppBar(
        title: Text(
            'Magic 6 balls'),
        backgroundColor: Colors.black,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(MdiIcons.squareInc),
            color: Colors.white,
            onPressed: () {
              Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondRoute())
              );
            },
          ),
          ],
      ),
      body: Number(),
    );
  }
}

class SecondRoute extends StatefulWidget {
  @override
  _SecondRouteState createState() {
    return new _SecondRouteState();
  }
}

class _SecondRouteState extends State<SecondRoute>{
  String result ="Hey there!";

  Future _scanQR() async {
    try{
      String qrResult = await BarcodeScanner.scan();
      setState(() {
        result = qrResult;
      });
    } on PlatformException catch (ex) {
      if (ex.code == BarcodeScanner.CameraAccessDenied){
        setState(() {
          result = "Camera permission was denied";
        });
      } else {
        setState(() {
          result = "Unknown Error $ex";
        });
      }
    } on FormatException {
      setState(() {
        result = "You pressed the black button before scanning anything";
      });
    }catch (ex) {
      setState(() {
        result = "Unknown Error $ex";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scan'),
      ),
      body: Center(
        child: Text(
          result,
          style: new TextStyle(fontSize: 20.0),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _scanQR,
        label: Text('Scan'),
        icon: Icon(Icons.camera_alt),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

class Number extends StatefulWidget {
  @override
  _NumberState createState() => _NumberState();
}

class _NumberState extends State<Number> {

  int ball1 = 1;
  int ball2 = 1;
  int ball3 = 1;
  int ball4 = 1;
  int ball5 = 1;
  int ball6 = 1;

  void randomNumbers() {
    setState(() {
          ball1 = Random().nextInt(49) + 1;
          ball2 = Random().nextInt(49) + 1;
          ball3 = Random().nextInt(49) + 1;
          ball4 = Random().nextInt(49) + 1;
          ball5 = Random().nextInt(49) + 1;
          ball6 = Random().nextInt(49) + 1;
        });
  }


  void addRows(){
    setState(() {
    });
  }

  void removeRows(){
    setState(() {
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: ListView(
                children: <Widget>[
                  SizedBox(height: 100.0),
                  Center(
                    child: Text('Winners Number')
                  ),
                  SizedBox(height: 16.0),

                  buildForm(),

                  SizedBox(height: 16.0),

                  RaisedButton.icon(
                    icon: Icon(Icons.add),
                    label: Text('Add Rows'),
                    onPressed: () {
                      addRows();
                    },
                  ),
                  ],
                ),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          randomNumbers();
        },
        label: Text(
            'Click Here!'),
        icon: Icon(
            Icons.loop),
        backgroundColor: Colors.black,
      ),
    );
  }

  Widget buildForm() {
    List<Widget> list = new List();
    for (var index = 0; index < 1; index++) {
      list.add(Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball1',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball2',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball3',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball4',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball5',
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 60,
                width: 60,
                child: Center
                  (
                  child: Text(
                    '$ball6',
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                  color: Colors.black,
                  shape: BoxShape.circle,
                ),
              ),
            ],
          ));
      list.add(
          SizedBox(
            height: 12.0,
          ));
    }
    return Column(
        children: list);
  }
}

Answer 1

我建议做的是，让行始终存在，但只需使用可见性小部件隐藏它们。

添加一个 int 计数器变量并在每次点击 addRow 时递增。

然后用可见性包裹你的球小部件并执行类似的操作：

伪代码

Visibilty( visible: counter == 1, child: BallWidget(), )

...对于所有其他球小部件，依此类推。

希望对你有帮助。