listview - 在GridView中独立地复制多个子级

Question

我正在编写此应用程序以学习Flutter / Dart的应用程序具有一个扁平按钮，可在设定范围内生成一个随机数；一个文本小部件，用于显示该数字；以及一个扁平按钮，当按下时会将文本小部件重置为0。

我正在尝试添加一个 float 操作按钮，当按下该按钮时，将在现有按钮和文本小部件下添加一组新按钮，这些按钮和文本小部件将能够在不更改前一个随机数的情况下生成新的独立随机数。我正在寻找一种方法，能够添加尽可能多的，我希望所有人都能独立生成随机数的方法。谢谢!

import 'package:flutter/material.dart';
import 'dart:math' show Random;

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          //title: 'Random Number Generator',
          //theme: ThemeData(
          //primarySwatch: Colors.blue,
          //visualDensity: VisualDensity.adaptivePlatformDensity,
          //),
          home: MyHomePage(title: 'Random Number Increase'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);

      final String title;

      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    int min = 50;
    int max = 250;
    var rnd = Random();

    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;

      void _incrementCounter() {
        setState(() {
          _counter = min + rnd.nextInt(max - min);
        });
      }

      void _resetCounter() {
        setState(() {
          _counter = 0;
        });
      }

      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        final double itemHeight = (size.height - kToolbarHeight - 550) / 2;
        final double itemWidth = size.width / 2;

        return MaterialApp(
            home: Scaffold(
                body: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [Colors.orange, Colors.orange],
                      ),
                    ),
                    child: GridView.count(
                      primary: true,
                      padding: const EdgeInsets.only(
                        top: 100,
                      ),
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      crossAxisCount: 3,
                      childAspectRatio: (itemWidth / itemHeight),
                      children: <Widget>[
                        Container(
                          child: FlatButton(
                              child: Text('Random',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                  )),
                              color: Colors.green,
                              onPressed: _incrementCounter,
                              splashColor: Colors.white),
                        ),
                        Container(
                          child: Text(
                            '$_counter',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                            ),
                          ),
                          alignment: Alignment.center,
                          color: Colors.blue,
                          height: 10,
                        ),
                        Container(
                          child: FlatButton(
                            child: Text('Reset',
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                )),
                            color: Colors.red,
                            onPressed: _resetCounter,
                            splashColor: Colors.yellow,
                          ),
                        ),
                      ],
                    ))));
      }
    }

Answer 1

@Andrew，让您的生活变得更艰难的事实是，您希望每行都有一个逻辑(网格中的3个元素)，并为每个行保持各自的状态。

因此，具有单个组件的Grid并不是您想要的那样动态。

最简单的解决方案是将逻辑组件与其单独的计数器分开，将重置和随机按钮作为单独的小部件(RowCounter)(基于Row)进行分离，并添加ListView而不是GridView来动态呈现它们的列表。

另一个解决方案是您可能仅使用一个屏幕尺寸测试了该解决方案，但是itemHeight会根据您使用的设备尺寸变为负值(如果高度小于kToolbarHeight + 550，那么我删除了尺寸供您自己修复(我已经评论了这些行)

import 'package:flutter/material.dart';
import 'dart:math' show Random;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //title: 'Random Number Generator',
      //theme: ThemeData(
      //primarySwatch: Colors.blue,
      //visualDensity: VisualDensity.adaptivePlatformDensity,
      //),
      home: MyHomePage(title: 'Random Number Increase'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

int min = 50;
int max = 250;
var rnd = Random();

class _MyHomePageState extends State<MyHomePage> {
  List<RowCounter> counterList = [RowCounter()];

  @override
  Widget build(BuildContext context) {
    void _incrementCounter() {
      setState(() {
        counterList.add(RowCounter());
      });
    }

    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
        body: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.orange, Colors.orange],
            ),
          ),
          child: ListView(
            shrinkWrap: true,
            addAutomaticKeepAlives: true,
            children: <Widget>[...counterList],
          ),
        ),
      ),
    );
  }
}

class RowCounter extends StatefulWidget {
  @override
  _RowCounterState createState() => _RowCounterState();
}

class _RowCounterState extends State<RowCounter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter = min + rnd.nextInt(max - min);
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    // var size = MediaQuery.of(context).size;
    // double itemHeight = (size.height - kToolbarHeight - 550) / 2;
    // double itemWidth = size.width / 2;

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Container(
          // height: itemHeight,
          // width: itemWidth,
          child: FlatButton(
              child: Text('Random',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  )),
              color: Colors.green,
              onPressed: _incrementCounter,
              splashColor: Colors.white),
        ),
        Container(
          // height: itemHeight,
          // width: itemWidth,
          child: Text(
            '$_counter',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
          alignment: Alignment.center,
          color: Colors.blue,
        ),
        Container(
          // height: itemHeight,
          // width: itemWidth,
          child: FlatButton(
            child: Text('Reset',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                )),
            color: Colors.red,
            onPressed: _resetCounter,
            splashColor: Colors.yellow,
          ),
        ),
      ],
    );
  }
}