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

问题描述 投票:0回答:2

当我单击“ +添加行”按钮时,我想添加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);
  }
}
flutter flutter-layout
2个回答
0
投票

我建议做的是,将行始终保留在其中,而仅使用可见性小部件将其隐藏。

添加一个整数计数器变量,并在每次单击addRow时将其递增。

然后将可见的球小部件包裹起来,并执行类似的操作:

伪代码

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

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

希望有帮助。


0
投票

这只是生成与其他行完全不同的随机数的技巧。

 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;

有0.02040816326%的机会与前一行生成相同的随机数。

第一方式

您可以使用Random().nextInt(49) + 1。用Set randomSet = new Set();添加每个随机数randomSet.add(randomNumber)并使用if(randomNumber in randomSet)如果为true,则生成另一个。

第二种方式

如果您有6个球,也许您可​​以事先自己制作1-6个数字。首先创建列表,添加所有单个随机数,然后将其随机播放。这样,不会重复随机数。
import 'dart:math';

List shuffle(List items) {
  var random = new Random();

  // Go through all elements.
  for (var i = items.length - 1; i > 0; i--) {

    // Pick a pseudorandom number according to the list length
    var n = random.nextInt(i + 1);

    var temp = items[i];
    items[i] = items[n];
    items[n] = temp;
  }

  return items;
}

main() {
  var items = [1, 2, 3, 4, 5, 6];

  print(shuffle(items));
}

从此处的答案中获取的代码:List.shuffle() in Dart?

然后

ball1 = items[0];
          ball2 = items[1];
          ball3 = items[2];
          ball4 = items[3];
          ball5 = items[4];
          ball6 = items[5];

希望有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.