Flutter：省略三元运算符中的 else 子句以使用默认样式

Posted 2023-02-23

【中文标题】Flutter：省略三元运算符中的 else 子句以使用默认样式

【英文标题】：Flutter: Omit else clause in ternary operator in order to use default styling

【发布时间】：2021-09-26 07:54:23

【问题描述】：

我经常遇到一些情况，我想根据一些可能如下所示的条件设置Widget 的样式：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatefulWidget 
  @override
  _HomeState createState() => _HomeState();


class _HomeState extends State<Home> 
  bool condition = true;
  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: OutlinedButton(
            style: OutlinedButton.styleFrom(
                side:
                    BorderSide(color: condition ? Colors.blue : /** DEFAULT Color**/)),
            onPressed: () => _changeColor(),
            child: Text('Press')),
      ),
    );
  

  void _changeColor() => setState(() => condition = !condition);

上述代码无法编译，因为如果 condition 为 false，Flutter 希望我指定替代颜色。但我不想指定任何颜色，而只是使用我的Theme 设置的默认颜色，以防 条件 评估为false。这怎么可能？

我知道在要返回Widget 的情况下使用三元运算符时（例如在child: condition ? Container() : ... 之后），我们可以简单地指定SizedBox.shrink() 以使其无效。当不想指定任何样式但回退到默认行为时，我会分别做什么？

【参考方案1】：

如果 Flutter 小部件的构造函数的属性不是必需的，通常可以安全地给它null（因为这是任何省略的可选属性的默认值），此时小部件要么忽略它属性或回退到隐式默认值，以适当者为准。

所以在这种情况下，color 的“默认”值可以简单地为空，此时BorderSide 的constructor 将回退到默认值Color(0xFF000000)。

BorderSide(color: condition ? Colors.blue : null)

【讨论】：

我之前尝试过使用null，但这会产生以下运行时错误：Exception has occurred. _AssertionError ('package:flutter/src/painting/borders.dart': Failed assertion: line 69 pos 15: 'color != null': is not true.)，考虑到BorderSide 构造函数... : assert(color != null) 的源代码，这很有意义。如果我切换到空安全，我的 IDE 甚至会显示 语法错误。任何想法如何达到预期的结果？谢谢！

在这种情况下，您可以只使用省略参数时会使用的默认值 - const Color(0xFF000000)。

嗯，这正是问题所在，我不知道确切的默认颜色是什么。它不是 100% 黑色，而是根据我使用的 Theme（浅色或深色）而变化的一些较浅的值。是否有任何表格可以用来查找 Flutter widgets 的默认颜色，以了解它们所指的 Theme 的哪个属性（例如 primaryColor 或 accentColor）？

我链接的源代码清楚地表明，省略时该属性的默认颜色是 100% 黑色。您可以通过点击链接或在 IDE 中右键单击 BorderSide 并选择“查看实现”或类似内容自行查看。 Dart/Flutter 是开源的，你可以随时打开一个小部件来查看它是如何实现的。

好的，我明白了。我希望有一种方法可以避免指定任何内容，因为我指定了自定义 OutlinedButtonTheme（对于我的浅色和深色 Theme），我希望应用程序在出现 false 条件时回退到它。不过谢谢你的帮助！

【参考方案2】：

在主文件中，在MaterialApp中，我们通常会放主题细节，如果我们愿意也可以放自定义样式。如果我们不放置自定义主题数据，那么我们的应用将使用默认样式。

要获得主题价值，我们需要上下文。我们可以使用它来获取任何主题值。

var primaryColor = Theme.of(context).primaryColor;

Theme.of(context) 有每个主题样式的值，你可以从这里获取默认值。

喜欢

BorderSide(color: condition ? Colors.blue : Theme.of(context).primaryColor)