Flutter 如何使用在另一个有状态小部件中创建的按钮将项目添加到列表中？_Flutter_Dart

Flutter 如何使用在另一个有状态小部件中创建的按钮将项目添加到列表中？

flutter dart

Flutter 如何使用在另一个有状态小部件中创建的按钮将项目添加到列表中？,flutter,dart,Flutter,Dart,我在一个类中有一个整数，我想在另一个类中使用它在按下“+”或“-”按钮时删除或向列表中添加容器。我不知道这是否是实现我想要的目标的正确方法，但我无法想出任何有效的解决方案。一般来说，我对颤振和编码都是新手，我花了几个小时试图解决这个问题，所以我非常感谢任何解决方案 import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: Home())); class Home extends Sta

我在一个类中有一个整数，我想在另一个类中使用它在按下“+”或“-”按钮时删除或向列表中添加容器。我不知道这是否是实现我想要的目标的正确方法，但我无法想出任何有效的解决方案。一般来说，我对颤振和编码都是新手，我花了几个小时试图解决这个问题，所以我非常感谢任何解决方案

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var addcontainers = AddContainers();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: new Column(
        children: [
          new Expanded(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4),
                itemCount: addcontainers.q,
                itemBuilder: (context, i) {
                  return Container(
                    child: Text(
                      "A",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.w600,
                        fontFamily: "Arial",
                      ),
                    ),
                    color: Colors.blue,
                    padding: EdgeInsets.all(20.0),
                    margin: EdgeInsets.all(20.0),
                  );
                }),
          ),
          AddContainers()
        ],
      ),
    );
  }
}



class AddContainers extends StatefulWidget {
  @override
  _AddContainersState createState() => _AddContainersState();
  final int q;
 AddContainers({this.q});
}

class _AddContainersState extends State<AddContainers> {
  int q = 8;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
            child: Text(
              "Container",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 15.0,
                fontWeight: FontWeight.w600,
                fontFamily: "Arial",
              ),
            ),
            color: Colors.blue,
            padding: EdgeInsets.all(15.0),
            margin: EdgeInsets.all(20.0),
            height: 70,
            width: MediaQuery.of(context).size.width * 0.2),
        Positioned(
          bottom: 20,
          right: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                q++;
              });
            },
            child: Container(
              child: Icon(Icons.add),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
        Positioned(
          bottom: 20,
          left: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                if (q != 0) q--;
              });
            },
            child: Container(
              child: Icon(Icons.remove),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp（home:home（））；
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
var addcontainers=addcontainers（）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'Home'）），
正文：新栏目(
儿童：[
新扩展(
子项：GridView.builder(
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：4），
itemCount:addcontainers.q，
itemBuilder：（上下文，i）{
返回容器(
子：文本(
“A”，
textAlign:textAlign.center，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.w600，
方特家族：“Arial”，
),
),
颜色：颜色，蓝色，
填充：所有边缘设置（20.0），
裕度：所有边缘集（20.0），
);
}),
),
AddContainers（）
],
),
);
}
}
类AddContainers扩展StatefulWidget{
@凌驾
_AddContainerState createState（）=>\u AddContainerState（）；
最终int q；
AddContainers（{this.q}）；
}
类_addContainerState扩展状态{
int q=8；
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
容器(
子：文本(
“集装箱”，
textAlign:textAlign.center，
样式：TextStyle(
字体大小：15.0，
fontWeight:fontWeight.w600，
方特家族：“Arial”，
),
),
颜色：颜色，蓝色，
填充：所有边缘设置（15.0），
裕度：所有边缘集（20.0），
身高：70，
宽度：MediaQuery.of（context）.size.width*0.2），
定位(
底数：20，
右:20,，
孩子：InkWell(
onTap:（）{
设置状态（）{
q++；
});
},
子：容器(
子：图标（Icons.add），
装饰：盒子装饰(
边框：边框。全部（颜色：Colors.black，宽度：2）），
宽度：MediaQuery.of（context）.size.width*0.1，
身高：30，
),
),
),
定位(
底数：20，
左:20,，
孩子：InkWell(
onTap:（）{
设置状态（）{
如果（q！=0）q--；
});
},
子：容器(
子：图标（图标。删除），
装饰：盒子装饰(
边框：边框。全部（颜色：Colors.black，宽度：2）），
宽度：MediaQuery.of（context）.size.width*0.1，
身高：30，
),
),
),
],
);
}
}

您的代码不起作用，因为home小部件不知道q值何时变化。值更改时不会通知它，因此 addcontainers.q始终具有相同的值。要使代码正常工作，需要使用回调

  AddContainers(callback: (value){
        setState(() {
          itemCount = value;
        });
      },)

这样，home小部件就可以知道值何时发生了变化

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp（home:home（））；
类Home扩展了StatefulWidget{
@凌驾
_HomeState createState（）=>\u HomeState（）；
}
类(HomeState扩展状态){
int itemCount=0；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'Home'）），
正文：新栏目(
儿童：[
新扩展(
子项：GridView.builder(
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：4），
itemCount:itemCount，
itemBuilder：（上下文，i）{
返回容器(
子：文本(
“A”，
textAlign:textAlign.center，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.w600，
方特家族：“Arial”，
),
),
颜色：颜色，蓝色，
填充：所有边缘设置（20.0），
裕度：所有边缘集（20.0），
);
}),
),
AddContainers（回调：（值）{
设置状态（）{
itemCount=值；
});
},)
],
),
);
}
}
类AddContainers扩展StatefulWidget{
AddContainers（{this.callback}）；
最终函数（int）回调；
@凌驾
_AddContainerState createState（）=>\u AddContainerState（）；
}
类_addContainerState扩展状态{
int q=8；
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
容器(
子：文本(
“集装箱”，
textAlign:textAlign.center，
样式：TextStyle(
字体大小：15.0，
fontWeight:fontWeight.w600，
方特家族：“Arial”，
),
),
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int itemCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: new Column(
        children: [
          new Expanded(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4),
                itemCount: itemCount,
                itemBuilder: (context, i) {
                  return Container(
                    child: Text(
                      "A",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.w600,
                        fontFamily: "Arial",
                      ),
                    ),
                    color: Colors.blue,
                    padding: EdgeInsets.all(20.0),
                    margin: EdgeInsets.all(20.0),
                  );
                }),
          ),
          AddContainers(callback: (value){
            setState(() {
              itemCount = value;
            });
          },)
        ],
      ),
    );
  }
}



class AddContainers extends StatefulWidget {
   AddContainers({this.callback});

   final Function(int) callback;

  @override
  _AddContainersState createState() => _AddContainersState();

 
}

class _AddContainersState extends State<AddContainers> {
  int q = 8;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
            child: Text(
              "Container",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 15.0,
                fontWeight: FontWeight.w600,
                fontFamily: "Arial",
              ),
            ),
            color: Colors.blue,
            padding: EdgeInsets.all(15.0),
            margin: EdgeInsets.all(20.0),
            height: 70,
            width: MediaQuery.of(context).size.width * 0.2),
        Positioned(
          bottom: 20,
          right: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                widget.callback(q++);
              });
            },
            child: Container(
              child: Icon(Icons.add),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
        Positioned(
          bottom: 20,
          left: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                if (q != 0) widget.callback(q--);
              });
            },
            child: Container(
              child: Icon(Icons.remove),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
      ],
    );
  }
}

class _HomeState extends State<Home> {
  final ValueNotifier<int> q = ValueNotifier<int>(8);

  refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    ...
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4),
                itemCount: q.value,
                ...
          ),
          AddContainers(q: q, callback: refresh)
        
... 
class _AddContainersState extends State<AddContainers> {
...
          child: InkWell(
            onTap: () {
              setState(() {
                widget.q.value++;
                print(widget.q.value);
              });
              widget.callback();
            },
...         
          child: InkWell(
            onTap: () {
              setState(() {
                if (widget.q.value != 0) widget.q.value--;
              });
              widget.callback();
            },
...
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final ValueNotifier<int> q = ValueNotifier<int>(8);

  refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Column(
        children: [
          Expanded(
            child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4),
                itemCount: q.value,
                itemBuilder: (context, i) {
                  return Container(
                    child: Text(
                      "A",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.w600,
                        fontFamily: "Arial",
                      ),
                    ),
                    color: Colors.blue,
                    padding: EdgeInsets.all(20.0),
                    margin: EdgeInsets.all(20.0),
                  );
                }),
          ),
          AddContainers(q: q, callback: refresh)
        ],
      ),
    );
  }
}

class AddContainers extends StatefulWidget {
  @override
  _AddContainersState createState() => _AddContainersState();

  final ValueNotifier<int> q;
  final VoidCallback callback;
  AddContainers({this.q, this.callback});
}

class _AddContainersState extends State<AddContainers> {
  //int q = 8;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
            child: Text(
              "Container",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 15.0,
                fontWeight: FontWeight.w600,
                fontFamily: "Arial",
              ),
            ),
            color: Colors.blue,
            padding: EdgeInsets.all(15.0),
            margin: EdgeInsets.all(20.0),
            height: 70,
            width: MediaQuery.of(context).size.width * 0.2),
        Positioned(
          bottom: 20,
          right: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                widget.q.value++;
                print(widget.q.value);
              });
              widget.callback();
            },
            child: Container(
              child: Icon(Icons.add),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
        Positioned(
          bottom: 20,
          left: 20,
          child: InkWell(
            onTap: () {
              setState(() {
                if (widget.q.value != 0) widget.q.value--;
              });
              widget.callback();
            },
            child: Container(
              child: Icon(Icons.remove),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 2)),
              width: MediaQuery.of(context).size.width * 0.1,
              height: 30,
            ),
          ),
        ),
      ],
    );
  }
}