时间戳

首页 > 解决方案 > 如何像 TabBar 一样更改 IconButton 颜色？

flutter - 如何像 TabBar 一样更改 IconButton 颜色？

问题描述

我想在我的 Appbar 标题旁边而不是在它下面有一个 TabBar，但我无法在“操作”中添加一个 TabBar。所以我做了一行 IconButton 。我的 IconButtons 的目的是更改 GridView 的 crossAxisCount 数。我的目标是更改所选 IconButton 的颜色：

在此处输入图像描述

import 'package:flutter/material.dart';

class TestingPage extends StatefulWidget {
  @override
  _TestingPageState createState() => _TestingPageState();
}

class _TestingPageState extends State<TestingPage> {
  int gridNumber = 3;
  bool isSelected = true;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.grey,
          title: Text('Home'),
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.format_align_left,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 3;
                  isSelected = true;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_center,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 1;
                  isSelected = true;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_right,
                color: isSelected ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 5;
                  isSelected = true;
                });
              },
            ),
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(
                  Icons.directions_car,
                ),
                child: Text('First Tab'),
              ),
              Tab(
                icon: Icon(
                  Icons.directions_transit,
                ),
                child: Text('Second Tab'),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            GridView.count(
              crossAxisCount: gridNumber,
              children: [
                Container(color: Colors.red, height: 150.0),
                Container(color: Colors.purple, height: 150.0),
                Container(color: Colors.green, height: 150.0),
                Container(color: Colors.orange, height: 150.0),
                Container(color: Colors.yellow, height: 150.0),
                Container(color: Colors.pink, height: 150.0),
                Container(color: Colors.cyan, height: 150.0),
                Container(color: Colors.indigo, height: 150.0),
                Container(color: Colors.blue, height: 150.0),
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

您将在我上面的代码中看到，我的颜色会根据布尔“isSelected”而改变，但这会改变所有图标按钮的颜色。所以我尝试为每个按钮设置不同的变量，如下所示：

bool colorOne = true;
bool colorTwo, colorThree = false;

actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.format_align_left,
                color: colorOne ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 3;
                  colorOne = true;
                  colorTwo = false;
                  colorThree = false;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_center,
                color: colorTwo ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 1;
                  colorOne = false;
                  colorTwo = true;
                  colorThree = false;
                });
              },
            ),
            IconButton(
              icon: Icon(
                Icons.format_align_right,
                color: colorThree ? Colors.cyanAccent : Colors.white,
              ),
              onPressed: () {
                setState(() {
                  gridNumber = 5;
                  colorOne = false;
                  colorTwo = false;
                  colorThree = true;
                });
              },
            ),
          ],

但是当我这样做时，我得到以下错误：“断言失败：布尔表达式不能为空”

标签： flutterflutter-layout

解决方案

问题正在发生，因为colorTwo未初始化，默认情况下为空。您必须更改您的声明，例如：

bool colorTwo = false, colorThree = false;

我想建议，不要使用 3 个不同的布尔值，而是使用一个整数来保留选定的按钮索引（不会说这是最好的方法，但它比维护 3 个不同的变量要好）。

int selectedIndex = 0;

像这样更改按钮：

<Widget>[
        IconButton(
          icon: Icon(
            Icons.format_align_left,
            color: selectedIndex == 1 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 3;
              selectedIndex = 1;
            });
          },
        ),
        IconButton(
          icon: Icon(
            Icons.format_align_center,
            color: selectedIndex == 2 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 1;
              selectedIndex = 2;
            });
          },
        ),
        IconButton(
          icon: Icon(
            Icons.format_align_right,
            color: selectedIndex == 3 ? Colors.cyanAccent : Colors.white,
          ),
          onPressed: () {
            setState(() {
              gridNumber = 5;
              selectedIndex = 3;
            });
          },
        ),
     ],

推荐阅读