flutter 切换按钮始终使用默认颜色

huangapple go评论72阅读模式
英文:

flutter Toggle Button uses always the default color

问题

我有一个关于我的toggleButton的问题,问题出在哪里并不清楚。当我运行下面的代码时,切换按钮会出现在期望的位置,并且也可以按照期望的方式工作。然而,它们始终只显示默认颜色(选中时为蓝色背景,未选中时没有背景),而不是在ToggleButtons中定义的颜色。我已经尝试过一些方法,比如将列表定义为List<List<bool>>List<List<Widget>>,这是我在其他问题中找到的解决方案。但是然后我在initState()中生成的列表、setState()方法、isSelectedchildren上会得到错误。

谢谢你的帮助。

英文:

I have a problem with my toggleButton and it is not clear where the problem is. When I run the below code the toggle buttons appear in the desired location and are also payable as desired. However, they are always only in the default color (blue background when selected, no background when not selected) and not as defined in the ToggleButtons. I have already tried a few things, like defining the lists as List<List<bool>> and List<List<Widget>>, which I found as a solution in other questions. But then I get errors on the lists generated in initState(), in the setState() method, on isSelected and children.
Thanks for your help.

Code:

import 'package:calendar_vertical/provider/toggle_provider.dart';
import 'package:calendar_vertical/provider/user_model.dart';
import 'package:calendar_vertical/widgets/user_item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ToggleButtonUsers extends StatefulWidget {
  @override
  _ToggleButtonUsersState createState() => _ToggleButtonUsersState();
}

class _ToggleButtonUsersState extends State<ToggleButtonUsers> {
  bool vertical = false;
  List<bool> selectedUser = [];
  //final List<Widget> children = [];
  List<Widget> selectedChildren = [];

  @override
  void initState() {
    final userModelData = Provider.of<UserModel>(context, listen: false);
    final userModel = userModelData.items;
    final toggleModelData = Provider.of<ToggleProvider>(context, listen: false);
    final toggleModel = toggleModelData.items;

    for (var index = 0; index < toggleModel.length; index += 1) {
      selectedUser = List.generate(
        toggleModel.length,
        (index) => index == 0 ? true : false,
      );

      selectedChildren = List.generate(
        toggleModel.length,
        (index) => UserItem(
          userModel[index].id,
          userModel[index].name,
          userModel[index].image,
          userModel[index].color,
        ),
      );
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ToggleButtons(
        constraints: const BoxConstraints(
          minHeight: 40.0,
          maxHeight: 45,
          minWidth: 80.0,
          maxWidth: 85,
        ),
        selectedBorderColor: Colors.green,
        disabledBorderColor: Colors.red,
        direction: vertical ? Axis.vertical : Axis.horizontal,
        onPressed: (int index) {
          setState(() {
            selectedUser[index] = !selectedUser[index];
          });
          debugPrint('selected User ist nun: ' + selectedChildren.toString());
        },
        children: selectedChildren,
        isSelected: selectedUser,
      ),
    );
  }
}

答案1

得分: 1

你可以使用其他颜色选项,比如fillColor,selectedColor,disabledColor,fillColor,focusColor,highlightColor,hoverColor,splashColor。

如果你想改变背景颜色,可以使用fillColor,如果你想改变内容的颜色,可以使用selectColor

但是,disabledColordisableddBorderColor确定按钮被禁用时的颜色。只有在没有onPressed回调的情况下才适用此属性。这意味着当按钮不能被按下(禁用)时会应用此属性。

另外,focusColor确定按钮获得焦点时的背景颜色。当启用键盘导航或以编程方式将焦点放在按钮上时适用。

英文:

you can use other color options like fillColor, selectedColor, disabledColor, fillColor, focusColor, highlightColor, hoverColor, splashColor.

Use fillColor if you want to change the background color or selectColor if you want to change the color of the contents inside.

But, The disabledColor and disableddBorderColor determine the color when the button is disabled. This property only applies if the button is used without an onPressed callback. This means that it is applied when the button cannot be pressed (disabled).

Also, focusColor Determines the background color when the button is focused. Applies when keyboard navigation is enabled or when the button is programmatically focused.

huangapple
  • 本文由 发表于 2023年6月29日 05:39:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76576876.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定