Question

当我单击“ +添加行”按钮时，我希望添加6个球行（请参考此image），但是我有1个问题，就是我不确定它具有我编码的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(), )

...，以此类推，其他所有小球部件也是如此。

希望有帮助。

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

1 个答案: