如果某些条件为真或假，则在颤动中显示行

Posted 2023-02-23

【中文标题】如果某些条件为真或假，则在颤动中显示行

【英文标题】：display row in flutter if certain condition is true or false

【发布时间】：2020-10-27 04:17:48

【问题描述】：

flutter中有一行小部件，我希望它在满足特定条件时可见，如果条件为真则不可见，如果条件为假则应可见

下面是代码

Container(
      child: Row(
        children: <Widget>[
          // Button send image
         Text("Text1"),
         Text("Text2"),
         Text("Text3"),
         Text("Text4"),

        ],
      ),
      width: double.infinity,
      height: 50.0,
      decoration: BoxDecoration(border: Border(top: BorderSide(color: greyColor2, width: 0.5)), color: Colors.white),
    )

你可以说的条件

int a==b

真不可见，假不可见

我怎样才能实现它？

【问题讨论】：

您可以将其包装在可见性小部件中，并使用 visible 参数和 setState api.flutter.dev/flutter/widgets/Visibility-class.html

更改其可见性

【参考方案1】：

    Container(
              child: Row(
                children: <Widget>[
                  // Button send image
                  Text("Text1"),
                  if (a == b)
                    Text("Text2"),
                  Text("Text3"),
                  Text("Text4"),
                ],
              ),
              width: double.infinity,
              height: 50.0,
              decoration: BoxDecoration(
                  border:
                      Border(top: BorderSide(color: greyColor2, width: 0.5)),
                  color: Colors.white),
            ),

您可以对父容器做同样的事情，您只需要添加条件并基于该添加小部件（容器/文本）。

【参考方案2】：

这是假设整个小部件要么可见要么不可见，这也适用于任何行。

一种方法是将其嵌入到 Visibility 小部件中 小部件的visible 属性采用boolean 值

Visibility(
  visible: (a == b), // condition here
  child: Container(
  child: Row(
    children: <Widget>[
      // Button send image
     Text("Text1"),
     Text("Text2"),
     Text("Text3"),
     Text("Text4"),

    ],
  ),
  width: double.infinity,
  height: 50.0,
  decoration: BoxDecoration(border: Border(top: BorderSide(color: greyColor2, width: 0.5)), color: Colors.white),
)
)

另一种方法是使用表达式/运算符 condition ? (run this part if true) : (run this part if false)

a == b ? 
Container(
  child: Row(
    children: <Widget>[
      // Button send image
     Text("Text1"),
     Text("Text2"),
     Text("Text3"),
     Text("Text4"),

    ],
  ),
  width: double.infinity,
  height: 50.0,
  decoration: BoxDecoration(border: Border(top: BorderSide(color: 
 greyColor2, width: 0.5)), color: Colors.white),
) : Container(), // you can also replace this with Null

您可以使用Container()，它是一个空的小部件，或者您可以简单地放置一个Null，这样就不会放置任何小部件

【参考方案3】：

您可以在 dart 中使用 if statement 和 spread operator 的组合将 children（行）隐藏在 Rows 小部件中。这适用于几乎所有具有children 属性的小部件。代码看起来像这样 -

 child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Text(
        "Row 1",
        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
      ),
      Text(
        "Row 2",
        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
      ),

      //Our conditional Rows
      if (_condition) ...[
        Text(
          "Row 3",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
        ),
        Text(
          "Row 4",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
        ),
      ]
    ],
  ),

如您所见，前两行是固定的，而后两行可以根据_condition 添加/删除。如果_condition 为真，则将评估此条件列表。

这是演示此行为的示例应用程序，此应用程序使用一个按钮来切换_condition。

import 'package:flutter/material.dart';

void main() 
  //Run the App Widget
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: "Demo App",
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: HomeScreen(),
    );
  


class HomeScreen extends StatefulWidget 
  @override
  _HomeScreenState createState() => _HomeScreenState();


class _HomeScreenState extends State<HomeScreen> 
  bool _condition = false;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Dynamic Row"),
      ),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                "Row 1",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
              Text(
                "Row 2",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
              if (_condition) ...[
                Text(
                  "Row 3",
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                ),
                Text(
                  "Row 4",
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                ),
              ]
            ],
          ),
        ),
      ),
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: RaisedButton(
        color: Colors.red,
        animationDuration: Duration(microseconds: 500),
        child: Text(
          "Toggle",
          style: TextStyle(
            color: Colors.white,
            fontSize: 16.0,
            fontWeight: FontWeight.w600,
          ),
        ),
        onPressed: () 
          setState(() 
            _condition = !_condition;
          );
        ,
      ),
    );
  

这是输出 -

希望这会有所帮助！