如果某些条件为 true 或 false，则在 flutter 中显示行

Question

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

如果 true 不可见，如果 false 可见

我怎样才能实现它？

Answer 1

您可以在 dart 中使用和 的组合来隐藏Widgetchildren内的（行）。这适用于几乎所有具有属性的小部件。代码看起来像这样 -Rowsif statementspread operatorchildren

 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如果为 true，则将评估此条件列表。

这是演示此行为的示例应用程序，该应用程序使用按钮来切换_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;
          });
        },
      ),
    );
  }
}

这是输出 -

希望这可以帮助！

Answer 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这样就不会放置任何小部件