从更新Gridview.builder的FAB设置状态

Question

我仍然在学习颤振，并且很难用带有多个模糊数组(Map)的setstate动态地环绕我的思维。

我试图使用随机和FAB更新Gridview.build中简单容器的单个值(宽度、高度、颜色)。

如果我只在一个网格视图之外做一个随机元素，它就能正常工作。

这个类的最后输出是循环遍历每条曲线。*在网格视图模式中有一个颤振和一个随机形状。每次按下FAB按钮，它都会改变。

当前的错误是，我试图弄清楚如何将值添加到Map...if，这些值首先是通过setstate正确添加的：

帮帮我，欧比万，你是我唯一的希望。。

The method '[]' was called on null.
Receiver: null
Tried calling: []("width")

这是我的代码：

import 'dart:math';

import 'package:flutter/material.dart';

class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPageState createState() => _AnimatedContainerPageState();
}

class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
  double _width = 200;
  double _height = 200;
  Color _color = Colors.red;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(16);

  final random = Random();

  //Once working add all the Curves
  var curves = [
    Curves.bounceIn,
    Curves.bounceInOut,
    Curves.bounceOut,
    Curves.decelerate,
    Curves.ease,
    Curves.easeIn,
    Curves.easeInBack
  ];

  Map curveList = {
    'curve': Curves.bounceIn,
    'width': 200,
    'height': 200,
    'color': Colors.red,
    'borderrad': BorderRadius.circular(16),
  };

  void _randomize() {
    setState(() {
  
      //loop through curve list and add random params to each curve
      for (int i = 0; i < curves.length; i++) {

        _width = random.nextInt(300).toDouble();
        _height = random.nextInt(300).toDouble();
        _color = Color.fromRGBO(
            random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
        _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble());

  
        curveList.addAll({
          'curve': curves[i],
          'width': _width,
          'height': _height,
          'color': _color,
          'borderrad': _borderRadius,
        });
       // print(curveList);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer'),
      ),
      body: Center(
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3),
          itemCount: curveList.length,
          itemBuilder: (BuildContext context, int index) {
            print('index is $index and curves i is ${curves[index]}');
            return AnimatedContainer(
              width: curveList[index]['width'],
              height: curveList[index]['height'],
              decoration: BoxDecoration(
                color: curveList[index]['color'],
                borderRadius: curveList[index]['borderradius'],
              ),
              duration: Duration(seconds: 1),
              curve: curves[index],
              padding: EdgeInsets.all(10),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: _randomize,
      ),
    );
  }
}

​

​

Answer 1

变量curveList是Map，而不是Map的List，因此请更改为此。

return AnimatedContainer(
              width: curveList['width'],
              height: curveList['height'],
              decoration: BoxDecoration(
                color: curveList['color'],
                borderRadius: curveList['borderradius'],
              ),
              duration: Duration(seconds: 1),
              curve: curves[index],
              padding: EdgeInsets.all(10),
            );

编辑：

实际上，您需要curveList作为用例的List<Map> (地图列表)。所以你需要做出这样的改变。

List<Map> curveList = [
        {
          'curve': Curves.bounceIn,
          'width': 200.0,
          'height': 200.0,
          'color': Colors.red,
          'borderrad': BorderRadius.circular(16),
        }
      ];
    
      void _randomize() {
        setState(() {
    
          //loop through curve list and add random params to each curve
          curveList.clear();
          for (int i = 0; i < curves.length; i++) {
    
            _width = random.nextInt(300).toDouble();
            _height = random.nextInt(300).toDouble();
            _color = Color.fromRGBO(
                random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
            _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble());
    
            curveList.add({
    
              'curve': curves[i],
              'width': _width,
              'height': _height,
              'color': _color,
              'borderrad': _borderRadius,
            });
            // print(curveList);
          }
        });
      }

把这部分保持原样

width: curveList[index]['width'],
              height: curveList[index]['height'],
              decoration: BoxDecoration(
                color: curveList[index]['color'],
                borderRadius: curveList[index]['borderradius'],
              ),

Answer 2

“非常感谢”吉加尔·帕特尔！错误是列表，添加clear()是明智的做法。下面是最终的用例代码。如果您想要在任何地方使用这一点，请确保首先对边框半径进行高度检查，因为有时动画会出现负高度。

mport 'dart:math';

import 'package:flutter/material.dart';

class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPageState createState() => _AnimatedContainerPageState();
}

class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
  double _width = 200;
  double _height = 200;
  Color _color = Colors.red;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(16);

  final random = Random();

  var curves = [
    Curves.bounceIn,
    Curves.bounceInOut,
    Curves.bounceOut,
    Curves.decelerate,
    Curves.ease,
    Curves.easeIn,
    Curves.easeInBack,
    Curves.easeInCirc,
    Curves.easeInCubic,
    Curves.easeInExpo,
    Curves.easeInOut,
    Curves.easeInOutBack,
    Curves.easeInOutCirc,
    Curves.easeInOutCubic,
    Curves.easeInOutCubicEmphasized,
    Curves.easeInOutExpo,
    Curves.easeInOutQuad,
    Curves.easeInOutQuart,
    Curves.easeInOutQuint,
    Curves.easeInOutSine,
    Curves.easeInQuad,
    Curves.easeInQuart,
    Curves.easeOutSine,
    Curves.elasticIn,
    Curves.elasticInOut,
    Curves.elasticOut,
    Curves.fastLinearToSlowEaseIn,
    Curves.fastOutSlowIn,
    Curves.linear,
    Curves.linearToEaseOut,
    Curves.slowMiddle
  ];

  List<Map> curveList = [
    {
      'curve': Curves.bounceIn,
      'width': 200.0,
      'height': 200.0,
      'color': Colors.red,
      'borderrad': BorderRadius.circular(16),
    }
  ];

  void _randomize() {
    setState(() {
      //loop through curve list and add random params to each curve
      curveList.clear();
      for (int i = 0; i < curves.length; i++) {
        _width = random.nextInt(300).toDouble();
        _height = random.nextInt(300).toDouble();
        _color = Color.fromRGBO(
            random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
        _borderRadius = BorderRadius.circular(random.nextInt(100).toDouble());

        curveList.add({
          'curve': curves[i],
          'width': _width,
          'height': _height,
          'color': _color,
          'borderrad': _borderRadius,
        });
        // print(curveList);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer'),
      ),
      body: Center(
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3),
          itemCount: curveList.length,
          itemBuilder: (BuildContext context, int index) {
            return Stack(
              alignment: Alignment.center,
              children: [
                AnimatedContainer(
                  width: curveList[index]['width'],
                  height: curveList[index]['height'],
                  decoration: BoxDecoration(
                    color: curveList[index]['color'],
                    borderRadius: curveList[index]['borderrad'],
                  ),
                  duration: Duration(seconds: 4),
                  curve: curves[index],
                  padding: EdgeInsets.all(10),
                ),
                Container(
                  width: 100,
                  child: Text(
                    curves[index].toString(),
                    style: TextStyle(
                      color: Colors.white,
                      backgroundColor: Colors.black,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: _randomize,
      ),
    );
  }
}

​

​