一旦点击触发，如何动态更改颤动网格卡中的图标

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

代码sn-p

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(),
    );
  }
}