按下后如何更改IconButton的图标

问题描述

我想知道如何在按下IconButton时更改其Icon。 （收藏夹到收藏夹）。我尝试了一些方法，但是没有用。 也许很容易，但是我是一个初学者，我不太了解它是如何工作的。

更新

import 'package:Flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';
import 'package:watch/constants.dart';

int itemCount = item.length;
List<bool> selected = new List<bool>();

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  initState() {
    for (var i = 0; i < itemCount; i++) {
    selected.add(false);
    }
    super.initState();
  }
 
  Icon notFavorite = Icon(Icons.favorite_border,size: 25,);
  Icon inFavorite = Icon(Icons.favorite,);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
         title: Text('Accueil',style: kAppBarStyle,),//backgroundColor: Colors.white,elevation: 0,body:  ListView.builder(
        itemCount: itemCount,itemBuilder: (BuildContext context,int index) {
      return Container(
        child: new Row(
          children: <Widget>[
            //Image
            new Container(
              margin: new EdgeInsets.all(5.0),child: new CachednetworkImage(
                imageUrl: item[index].imageURL,height: MediaQuery.of(context).size.width / 4,width: MediaQuery.of(context).size.width / 2,fit: BoxFit.cover,//Text
            Expanded(
              child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: <Widget>[
                Spacer(),//Titre
                Container(
                  padding: const EdgeInsets.only(bottom: 75.0,top: 10.0 ),child: Text(
                    item[index].title,style: kItemTitle,//Decription
                Container(
                  padding: const EdgeInsets.only(left: 10.0,top: 10.0),child:Text(
                    item[index].description,style: kItemDescription,//Favoris
                Spacer(),GestureDetector(
                  child: Container(
                    padding: const EdgeInsets.only(right: 10.0,top: 3.0),child: selected.elementAt(index) ? inFavorite : notFavorite,onTap: () {
                    setState(() {
                      selected[index] = !selected.elementAt(index);
                    });
                    },],);
    }
    )
  );
}
}

这是一个包含图像，文本和“收藏夹”按钮的ListView，它工作正常。

解决方法

首先，您需要一个布尔变量。

  bool toggle = false;

之后，您可以像这样使用IconButton：

   IconButton(
          icon: toggle
              ? Icon(Icons.favorite_border)
              : Icon(
                  Icons.favorite,),onPressed: () {
            setState(() {
              // Here we changing the icon.
              toggle = !toggle;
            });
          }),

,

复制粘贴代码即可使用：）

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),home: HomeApp(),);
  }
}

class HomeApp extends StatefulWidget {
  @override
  _HomeAppState createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  // Using a Bool
  bool addFavorite = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App :)"),body: Center(
        child: IconButton(
            icon: Icon(addFavorite ? Icons.favorite : Icons.favorite_border),onPressed: () {
              // Setting the state
              setState(() {
                addFavorite = !addFavorite;
              });
            }),);
  }
}

更新 ListView

的代码

class _HomeAppState extends State<HomeApp> {
  // Using a Bool List for list view builder
  List<bool> addFavorite = List<bool>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App :)"),body: ListView.builder(
          itemCount: 10,itemBuilder: (context,index) {
            // Setting a bool initially
            addFavorite.add(false);
            return IconButton(
                icon: Icon(addFavorite.elementAt(index)
                    ? Icons.favorite
                    : Icons.favorite_border),onPressed: () {
                  // Setting the state
                  setState(() {
                    // Changing icon of specific index
                    addFavorite[index] =
                        addFavorite[index] == false ? true : false;
                  });
                });
          }),);
  }
}

,

IconButton必须位于StatefulWidget中，并对未选择的图标和已选择的图标使用标志：

。 。

bool selected = false;
Icon first_icon = Icon(...);
Icon second_icon = Icon(...);

。 。

 IconButton(
    icon: selected
            ? first_icon 
            : second_icon,onPressed: () {
         try {
            // your code that you want this IconButton do
            setState(() {
                selected  = !selected;
            });
         } catch(e) {
             print(e);
         }  
    }),

---

用于ListView：

。 。

List<bool> selected =  new List<bool>();
Icon first_icon = Icon(...);
Icon second_icon = Icon(...);

。 。

ListView.builder(
     controller: scrollController,primary: true,...
     itemCount: _yourListViewLength,itemBuilder: (BuildContext context,int i) {
        selected.add(false);
        IconButton(
            icon: selected.elementAt(i)
                ? first_icon 
                : second_icon,onPressed: () {
             try {
                // your code that you want this IconButton do
                setState(() {
                    selected.elementAt(i) = !selected.elementAt(i);
                });
             } catch(e) {
                 print(e);
             }  
           }),},)

我希望这对您有帮助

,

自定义单选按钮（ListView中的某些IconButton会更改其图标）：

main.dart文件：

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

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: MyHomePage(title: 'Flutter Demo Home Page'),);
  }
}

my_home_page.dart文件：

import 'package:flutter/material.dart';

int itemCount = 5;
List<bool> selected = new List<bool>();

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

   @override
   initState() {
     for (var i = 0; i < itemCount; i++) {
        selected.add(false);
     }
     super.initState();
   }

  Icon firstIcon = Icon(
    Icons.radio_button_on,// Icons.favorite
    color: Colors.blueAccent,// Colors.red
    size: 35,);
  Icon secondIcon = Icon(
    Icons.radio_button_unchecked,// Icons.favorite_border
    color: Colors.grey,size: 35,);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: Center(
        child: ListView.builder(
            itemCount: itemCount,int index) {
              return IconButton(
                icon: selected.elementAt(index) ? firstIcon : secondIcon,onPressed: () {
                  try {
                    // your code that you want this IconButton do
                    setState(() {
                      selected[index] = !selected.elementAt(index);
                    });
                    print('tap on ${index + 1}th IconButton ( change to : ');
                    print(selected[index] ? 'active' : 'deactive' + ' )');
                  } catch (e) {
                    print(e);
                  }
                },);
            }),);
  }
}

,

如果需要，请输入我的代码： home_screen.dart

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';
import 'package:watch/constants.dart';


class ListViewExample extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return new ListViewExampleState();
  }
}

class ListViewExampleState extends State<ListViewExample>{
  bool addFavorite = false;
  Icon notFavorite = Icon(Icons.favorite_border,size: 25,);
  Icon inFavorite = Icon(Icons.favorite,);
  List<Container> _buildListItemsFromItems(){
    return item.map((item){

      var container = Container(
        child: new Row(
          children: <Widget>[
            //Image
            new Container(
              margin: new EdgeInsets.all(5.0),child: new CachedNetworkImage(
                imageUrl: item.imageURL,height: MediaQuery.of(context).size.width / 4,width: MediaQuery.of(context).size.width / 2,fit: BoxFit.cover,//Text
            Expanded(
              child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: <Widget>[
                Spacer(),//Titre
                Container(
                  padding: const EdgeInsets.only(bottom: 75.0,top: 5.0 ),child: Text(
                    item.title,style: kItemTitle,//Decription
                Container(
                  padding: const EdgeInsets.only(left: 10.0,top: 5.0),child:Text(
                    item.description,style: kItemDescription,//Favoris
                Spacer(),GestureDetector(
                  child: Container(
                    padding: const EdgeInsets.only(right: 10.0,top: 1.0),child: addFavorite ? inFavorite : notFavorite,onTap: () {
                    setState(() {
                      addFavorite = !addFavorite;
                    });
                  },],);
  return container;
    }).toList();
  }

  //Scaffold Global

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
       appBar: AppBar(
         title: Text('Accueil',style: kAppBarStyle,//backgroundColor: Colors.white,elevation: 0,body: ListView(
      children: _buildListItemsFromItems(),);
  }
}

它不是IconButton而是一个Icon，但它可以正常工作。