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

Question

flutter中有一排widgets，我想让它在满足一定条件的情况下可见，如果条件为真则不应该可见，如果条件为假则应该可见

下面是代码

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

if true 不可见 if false 可见

我该如何实现？

Answer 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),
            ),

您可以对父 Container 执行相同的操作，您只需要添加条件并根据该条件添加小部件(Container/Text)。

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),
)
)

另一种方法是使用 expression/operator 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 这样就不会放置任何小部件

Answer 3

您可以在 Rows 小部件中隐藏 children（行），方法是在 dart 中组合使用 if statement 和 spread operator。这适用于几乎所有具有 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),
        ),
      ]
    ],
  ),

如您所见，前两行是固定的，而最后两行可以是 added/removed，基于 _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;
          });
        },
      ),
    );
  }
}

这是输出 -

希望对您有所帮助！

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

display row in flutter if certain condition is true or false

flutter

flutter-widget