一旦点击触发，如何动态更改 flutter gridtile 卡中的图标

Question

我是 fultter 的新手，我正在尝试制作一个具有可点击卡片的网格。我想选择要种植的植物并更改图标以及该植物的信息以保存到该单个网格中。我想知道触发后如何为特定网格设置新状态？我附上了下面的代码。我似乎无法使用状态小部件将网格上的图标从铲子图标更改为发芽图标。

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


class WindowSillGrid extends StatefulWidget {
  @override
  _WindowSillGridState createState() => _WindowSillGridState();
}

class _WindowSillGridState extends State<WindowSillGrid> {
  @override

  Widget build(BuildContext context) {
    final title = "Window Sill Grid";

    return MaterialApp(
        title: title,
        home: Scaffold(
            backgroundColor: Colors.brown[400],
            appBar: AppBar(
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
     bottom: Radius.circular(20))),
              centerTitle: true,
              backgroundColor: Colors.green[600],
              title: Text(title),
            ),
        body: GridView.count(
            childAspectRatio: 1.0,
            crossAxisCount: 2,
            children: List.generate(6, (index) {
              return Center(
                child: ChoiceCard(choice: PlantGrowth[index]),
                  );
                }))));
 }
}

class PlantGrowthIcons {
  const PlantGrowthIcons({this.title, this.icon});

  final String title;
  final IconData icon;
 }

const List<PlantGrowthIcons> PlantGrowth = const <PlantGrowthIcons>[
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),
  const PlantGrowthIcons(title: 'Add Plant', icon: MyFlutterApp.shovel),


];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);
  final PlantGrowthIcons choice;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () { 
        Navigator.push(context,
            MaterialPageRoute(builder: (context) => WindowSillGridEditPage()));},
    child: Container(
      color: Colors.brown[300],
         child: GridTile(
          child: Card(
          color: Colors.brown[400],
         child: Center(
            child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Icon(choice.icon, size: 80.0, color: Colors.white),
                  Text(choice.title,  style: TextStyle(color: Colors.white),),
                 ],
             ),
          ),
          ),
    ),
    ),
    );
   }
}

 const List<Widget> items = const[
      ListTile(
       leading: Icon(MyFlutterApp.sprout, size: 50),
        title: Text('Asparagus'),
        subtitle: Text('Description here'),
        ),
      ListTile(
         leading: Icon(MyFlutterApp.sprout, size: 50),
         title: Text('Egg Plant'),
         subtitle: Text('Description here')
       ),
      ListTile(
         leading: Icon(MyFlutterApp.sprout, size: 50),
         title: Text('Tomato'),
         subtitle: Text('Description here'),
       ),
       ListTile(
          leading: Icon(MyFlutterApp.sprout, size: 50),
        title: Text('Cucumber'),
        subtitle: Text('Description here'),
       ),
  

class WindowSillGridEditPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         centerTitle: true,
         backgroundColor: Colors.green[600],
         title: Text('Plant3r'),
  ),
  body: Container(
    child:
    ListView(

      itemExtent: 60,
      children: items,
    ),

  ),
);}
}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以在 ChoiceCard 中传递 index 和 refresh 回调
并设置 PlantGrowth[widget.index].icon = MdiIcons.sprout; 为 InkWell

代码片段

ChoiceCard(
                        choice: PlantGrowth[index],
                        index: index,
                        callback: refresh),
...                     
return InkWell(
      onTap: () async {
        await Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => WindowSillGridEditPage(index: index)));
        callback();
...     
@override
  initState() {
    items = [
      InkWell(
        onTap: () {
          PlantGrowth[widget.index].title = "Asparagus";
          PlantGrowth[widget.index].icon = MdiIcons.sprout;
        },
        child: ListTile(
          leading: Icon(MdiIcons.sprout, size: 50),
          title: Text('Asparagus'),
          subtitle: Text('Description here'),
        ),
      ),

工作演示

完整代码

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

class WindowSillGrid extends StatefulWidget {
  @override
  _WindowSillGridState createState() => _WindowSillGridState();
}

class _WindowSillGridState extends State<WindowSillGrid> {
  void refresh() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    final title = "Window Sill Grid";

    return MaterialApp(
        title: title,
        home: Scaffold(
            backgroundColor: Colors.brown[400],
            appBar: AppBar(
              shape: RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.vertical(bottom: Radius.circular(20))),
              centerTitle: true,
              backgroundColor: Colors.green[600],
              title: Text(title),
            ),
            body: GridView.count(
                childAspectRatio: 1.0,
                crossAxisCount: 2,
                children: List.generate(6, (index) {
                  return Center(
                    child: ChoiceCard(
                        choice: PlantGrowth[index],
                        index: index,
                        callback: refresh),
                  );
                }))));
  }
}

class PlantGrowthIcons {
  PlantGrowthIcons({this.title, this.icon});

  String title;
  IconData icon;
}

List<PlantGrowthIcons> PlantGrowth = <PlantGrowthIcons>[
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
  PlantGrowthIcons(title: 'Add Plant', icon: MdiIcons.shovel),
];

class ChoiceCard extends StatelessWidget {
  ChoiceCard({Key key, this.choice, this.index, this.callback})
      : super(key: key);
  PlantGrowthIcons choice;
  final int index;
  final VoidCallback callback;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async {
        await Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => WindowSillGridEditPage(index: index)));
        callback();
      },
      child: Container(
        color: Colors.brown[300],
        child: GridTile(
          child: Card(
            color: Colors.brown[400],
            child: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Icon(choice.icon, size: 80.0, color: Colors.white),
                  Text(
                    choice.title,
                    style: TextStyle(color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class WindowSillGridEditPage extends StatefulWidget {
  final int index;
  WindowSillGridEditPage({this.index});

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

class _WindowSillGridEditPageState extends State<WindowSillGridEditPage> {
  List<Widget> items;

  @override
  initState() {
    items = [
      InkWell(
        onTap: () {
          PlantGrowth[widget.index].title = "Asparagus";
          PlantGrowth[widget.index].icon = MdiIcons.sprout;
        },
        child: ListTile(
          leading: Icon(MdiIcons.sprout, size: 50),
          title: Text('Asparagus'),
          subtitle: Text('Description here'),
        ),
      ),
      InkWell(
        onTap: () {
          PlantGrowth[widget.index].title = "Egg Plant";
          PlantGrowth[widget.index].icon = MdiIcons.sprout;
        },
        child: ListTile(
            leading: Icon(MdiIcons.sprout, size: 50),
            title: Text('Egg Plant'),
            subtitle: Text('Description here')),
      ),
      InkWell(
        onTap: () {
          PlantGrowth[widget.index].title = "Tomato";
          PlantGrowth[widget.index].icon = MdiIcons.sprout;
        },
        child: ListTile(
          leading: Icon(MdiIcons.sprout, size: 50),
          title: Text('Tomato'),
          subtitle: Text('Description here'),
        ),
      ),
      InkWell(
        onTap: () {
          PlantGrowth[widget.index].title = "Cucumber";
          PlantGrowth[widget.index].icon = MdiIcons.sprout;
        },
        child: ListTile(
          leading: Icon(MdiIcons.sprout, size: 50),
          title: Text('Cucumber'),
          subtitle: Text('Description here'),
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.green[600],
        title: Text('Plant3r'),
      ),
      body: Container(
        child: ListView(
          itemExtent: 60,
          children: items,
        ),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: WindowSillGrid(),
    );
  }
}

一旦点击触发，如何动态更改 flutter gridtile 卡中的图标

How to dynamically change icons in flutter gridtile cards once triggered on tap

gridview

choice

dart

flutter