Flutter GetX状态管理

我开始学习颤振课程，在状态管理部分，我决定学习Getx状态管理。 无论如何，在本教程中，我试图改变图标状态时按下，但它没有

我是新手，如果你能帮我，我会很感激的

产品\u项目.省道

import 'package:flutter/material.dart';
import 'package:getx_pattern/app/ui/android/products_overview/widgets/product_details.dart';
import 'package:get/get.dart';

import '../../../theme/app_theme.dart';
import './product.dart';
import './products.dart';

class ProductItem extends StatelessWidget {
  final pIndex;
  // final String title;
  // final String imageUrl;

  ProductItem({
    this.pIndex,
  });

  productDetails() {
    Get.to(
      ProductDetailScreen(),
      arguments: product.findById(pIndex.id).title,
      transition: Transition.rightToLeft,
    );
  }

  final Products product = Get.put(Products());
  // final Product pp = Get.put(Product(
  //     id: null, title: null, description: null, price: null, imageUrl: null));

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: GetBuilder<Products>(
          builder: (_) => GridTile(
              child: GestureDetector(
                onTap: () => productDetails(),
                child: Image.network(
                  product.findById(pIndex.id).imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
              footer: GridTileBar(
                backgroundColor: Colors.black87,
                leading: IconButton(
                    icon: Icon(product.findById(pIndex.id).isFavorite
                        ? Icons.favorite
                        : Icons.favorite_border),
                    color: appThemeData.accentColor,
                    onPressed: () {
                      product.findById(pIndex.id).toggleFavoriteStatus();
                      // print(_.items[pIndex].isFavorite);
                    }),
                trailing: IconButton(
                    icon: Icon(Icons.shopping_cart),
                    color: appThemeData.accentColor,
                    onPressed: () {}),
                title: Text(
                  product.findById(pIndex.id).title,
                  textAlign: TextAlign.center,
                ),
              )),
        ));
  }
}

import 'package:flutter/foundation.dart';
import 'package:get/get.dart';

class Product extends GetxController {
  final String id;
  final String title;
  final String description;
  final double price;
  final String imageUrl;
  bool isFavorite;

  Product({
    @required this.id,
    @required this.title,
    @required this.description,
    @required this.price,
    @required this.imageUrl,
    this.isFavorite = false,
  });

  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }
}

import 'package:get/get.dart';

import 'product.dart';

class Products extends GetxController {
  List<Product> items = [];

  Products();

  @override
  onInit() {
    items = [
      Product(
        id: 'p1',
        title: 'Red Shirt',
        description: 'A red shirt - it is pretty red!',
        price: 29.99,
        imageUrl:
            'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
      ),
      Product(
        id: 'p2',
        title: 'Trousers',
        description: 'A nice pair of trousers.',
        price: 59.99,
        imageUrl:
            'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px-Trousers%2C_dress_%28AM_1960.022-8%29.jpg',
      ),
    ];
    update();
    super.onInit();
  }

  List get myitems => [...items];

  Product findById(String id) {
    return items.firstWhere((prod) => prod.id == id);
  }

  void addProduct() {
//    _items.add(value);
    update();
  }
}

产品。省道

import 'package:flutter/material.dart';
import 'package:getx_pattern/app/ui/android/products_overview/widgets/product_details.dart';
import 'package:get/get.dart';

import '../../../theme/app_theme.dart';
import './product.dart';
import './products.dart';

class ProductItem extends StatelessWidget {
  final pIndex;
  // final String title;
  // final String imageUrl;

  ProductItem({
    this.pIndex,
  });

  productDetails() {
    Get.to(
      ProductDetailScreen(),
      arguments: product.findById(pIndex.id).title,
      transition: Transition.rightToLeft,
    );
  }

  final Products product = Get.put(Products());
  // final Product pp = Get.put(Product(
  //     id: null, title: null, description: null, price: null, imageUrl: null));

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        borderRadius: BorderRadius.circular(10.0),
        child: GetBuilder<Products>(
          builder: (_) => GridTile(
              child: GestureDetector(
                onTap: () => productDetails(),
                child: Image.network(
                  product.findById(pIndex.id).imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
              footer: GridTileBar(
                backgroundColor: Colors.black87,
                leading: IconButton(
                    icon: Icon(product.findById(pIndex.id).isFavorite
                        ? Icons.favorite
                        : Icons.favorite_border),
                    color: appThemeData.accentColor,
                    onPressed: () {
                      product.findById(pIndex.id).toggleFavoriteStatus();
                      // print(_.items[pIndex].isFavorite);
                    }),
                trailing: IconButton(
                    icon: Icon(Icons.shopping_cart),
                    color: appThemeData.accentColor,
                    onPressed: () {}),
                title: Text(
                  product.findById(pIndex.id).title,
                  textAlign: TextAlign.center,
                ),
              )),
        ));
  }
}

import 'package:flutter/foundation.dart';
import 'package:get/get.dart';

class Product extends GetxController {
  final String id;
  final String title;
  final String description;
  final double price;
  final String imageUrl;
  bool isFavorite;

  Product({
    @required this.id,
    @required this.title,
    @required this.description,
    @required this.price,
    @required this.imageUrl,
    this.isFavorite = false,
  });

  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }
}

import 'package:get/get.dart';

import 'product.dart';

class Products extends GetxController {
  List<Product> items = [];

  Products();

  @override
  onInit() {
    items = [
      Product(
        id: 'p1',
        title: 'Red Shirt',
        description: 'A red shirt - it is pretty red!',
        price: 29.99,
        imageUrl:
            'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
      ),
      Product(
        id: 'p2',
        title: 'Trousers',
        description: 'A nice pair of trousers.',
        price: 59.99,
        imageUrl:
            'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px-Trousers%2C_dress_%28AM_1960.022-8%29.jpg',
      ),
    ];
    update();
    super.onInit();
  }

  List get myitems => [...items];

  Product findById(String id) {
    return items.firstWhere((prod) => prod.id == id);
  }

  void addProduct() {
//    _items.add(value);
    update();
  }
}

import'package:get/get.dart'；
进口“产品.省道”；
类产品扩展了GetxController{
列表项=[]；
产品（）；
@凌驾
onInit（）{
项目=[
产品(
id:'p1'，
标题：“红衫军”，
描述：“一件红色衬衫——它很红！”，
价格:29.99，
图像URL：
'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
),
产品(
id:'p2'，
标题:"长裤",，
描述：“一条漂亮的裤子。”，
价格:59.99，
图像URL：
'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px长裤%2C\u连衣裙\uu28am\u 1960.022-8%29.jpg'，
),
];
更新（）；
super.onInit（）；
}
List get myitems=>[…项]；
产品findById（字符串id）{
返回项目.firstWhere（（prod）=>prod.id==id）；
}
void addProduct（）{
//_项目。增加（价值）；
更新（）；
}
}

产品网格

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import './product.dart';
import './product_item.dart';
import './products.dart';

class ProductsGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<Products>(
      init: Products(),
      builder: (data) => GridView.builder(
          padding: const EdgeInsets.all(10.0),
          itemCount: data.items.length,
          itemBuilder: (ctx, index) => ProductItem(
                pIndex: data.items[index],
              ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 3 / 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          )),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:get/get.dart”；
导入“/product.dart”；
导入“./product_item.dart”；
导入“/products.dart”；
类ProductsGrid扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回GetBuilder(
init:Products（），
生成器：（数据）=>GridView.builder(
填充：常数边集全部（10.0），
itemCount:data.items.length，
itemBuilder：（ctx，索引）=>ProductItem(
pIndex:data.items[索引]，
),
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2，
儿童方面：3/2，
横轴间距：10，
平均间距：10，
)),
);
}
}

产品详细信息

import 'package:getx_pattern/app/ui/android/products_overview/widgets/products.dart';

import '../../../theme/app_theme.dart';

class ProductDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: appThemeData,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
              title: GetBuilder<Products>(
            init: Products(),
            builder: (data) => Text(Get.arguments),
          )),
        ),
      ),
    );
  }
}

import'包：getx_pattern/app/ui/android/products_overview/widgets/products.dart'；
导入“../../theme/app_theme.dart”；
类ProductDetailScreen扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
主题：appThemeData，
家：安全区(
孩子：脚手架(
appBar:appBar(
标题：GetBuilder(
init:Products（），
生成器：（数据）=>Text（Get.arguments），
)),
),
),
);
}
}

我刚刚解决了这个问题。 通过将方法从product.dart移动

void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }

飞镖

void toggleFavoriteStatus(String id) {
    items.firstWhere((prod) => prod.id == id).isFavorite =
        !items.firstWhere((prod) => prod.id == id).isFavorite;
    update();
  }

我刚刚解决了这个问题。 通过将方法从product.dart移动

void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    update();
  }

飞镖

void toggleFavoriteStatus(String id) {
    items.firstWhere((prod) => prod.id == id).isFavorite =
        !items.firstWhere((prod) => prod.id == id).isFavorite;
    update();
  }

---

如果我使用的是get数据库获取，我不知道您真正想做什么 模型“？.”属性类似

实例：

Image.network(
     product.findById(pIndex.id).imageUrl,
     fit: BoxFit.cover,
 ),...

我使用：

Image.network(
     product?.imageUrl,
     fit: BoxFit.cover,
),...

---

希望对您有所帮助

如果我使用的是get数据库获取，我不知道您真正想做什么 模型“？.”属性类似

实例：

Image.network(
     product.findById(pIndex.id).imageUrl,
     fit: BoxFit.cover,
 ),...

我使用：

Image.network(
     product?.imageUrl,
     fit: BoxFit.cover,
),...

---

希望对您有所帮助这是因为您正在更新

产品
控制器，但是在
GetBuilder
中使用
产品
控制器，我的意思是您的
GetBuilder
必须使用更新的同一控制器，但您使用的是
GetBuilder（…
（而不是
GetBuilder（…
）

因此，有两种可能的解决方法：

第一：正如MNMB所说，是更新
产品
控制器

第二：将
GetBuilder（…
更改为
GetBuilder（…
在
ProductItem
小部件中。
这是因为您正在更新
product
控制器，但是使用
GetBuilder
中的
products
控制器，我的意思是您的
GetBuilder
必须使用更新后但正在使用
GetBuilder（…
（而不是
GetBuilder（…
）

因此，有两种可能的解决方法：

第一：正如MNMB所说，是更新
产品
控制器

第二：在
ProductItem
小部件中将
GetBuilder（…
更改为
GetBuilder（…
）