Question

我想在我的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'字体的变化而变化，但是这会更改所有IconButton的颜色。因此，我尝试为每个按钮设置不同的变量，如下所示：

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

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

Answer 1

之所以出现此问题，是因为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;
            });
          },
        ),
     ],

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

1 个答案: