Bir Flutter Widget'ın (Merkez Widget) alt özniteliğinde koşullu ifade nasıl kullanılır

Şimdiye kadar, bir Widget içinde bir koşullu ifade kullanmam gerektiğinde, aşağıdakileri yaptım (Merkezi ve Kapsayıcıları basitleştirilmiş kukla örnekler olarak kullanarak):

new Center(
  child: condition == true ? new Container() : new Container()
)

Bir if / else ifadesini kullanmayı denediğimde, bir Ölü kod uyarısına yol açacaktı:

new Center(
  child: 
    if(condition == true){
      new Container();
    }else{
      new Container();
    }
)

İlginçtir ki, bir switch case deyimi ile denedim ve bana aynı uyarıyı veriyor ve bu yüzden kodu çalıştıramıyorum. Yanlış bir şey mi yapıyorum yoksa ölü kod olduğunu düşünmeden if / else kullanamaz veya flutter ifadeleri değiştiremez mi?

Aslında yapabilirsiniz kullanmak if/elseve switchve dart / flatteri başka deyim satır içi.

Anında anonim bir işlev kullanın

class StatmentExample extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text((() {
      if(true){
        return "tis true";}

      return "anything but true";
    })());
  }
}

yani ifadelerinizi bir fonksiyona sarın

(() {
  // your code here
}())

Doğrudan UI 'işaretlemenize' çok fazla mantık koymamayı şiddetle tavsiye ederim, ancak Dart'taki tür çıkarımının biraz çalışma gerektirdiğini buldum, bu nedenle bazen böyle senaryolarda yararlı olabilir.

Üçlü operatörü kullanın

condition ? Text("True") : null,

Koleksiyonlarda If veya For ifadelerini veya yayılma operatörlerini kullanın

children: [
  ...manyItems,
  oneItem,
  if(canIKickIt)
    ...kickTheCan
  for (item in items)
    Text(item)

Bir yöntem kullanın

child: getWidget()

Widget getWidget() {
  if (x > 5) ...
  //more logic here and return a Widget

Anahtar ifadesini yeniden tanımlayın

Üçlü operatöre başka bir alternatif olarak, aşağıdaki https://stackoverflow.com/a/57390589/1058292 yazısında olduğu gibi switch ifadesinin bir işlev sürümünü oluşturabilirsiniz .

  child: case2(myInput,
  {
    1: Text("Its one"),
    2: Text("Its two"),
  }, Text("Default"));

Dart olarak, if/elseve switchifadeleri değil ifadelerdir. Bir değer döndürmezler, bu yüzden onları yapıcı parametrelerine geçiremezsiniz. Derleme yönteminizde çok fazla koşullu mantığınız varsa, denemek ve basitleştirmek iyi bir uygulamadır. Örneğin, kendi kendine yeten mantığı yöntemlere taşıyabilir ve if/elsedaha sonra kullanabileceğiniz yerel değişkenleri başlatmak için ifadeler kullanabilirsiniz.

Bir yöntem ve if / else kullanma

Widget _buildChild() {
  if (condition) {
    return ...
  }
  return ...
}

Widget build(BuildContext context) {
  return new Container(child: _buildChild());
}

Bir if/else

Widget build(BuildContext context) {
  Widget child;
  if (condition) {
    child = ...
  } else {
    child = ...
  }
  return new Container(child: child);
}

Kayıt için Dart 2.3, Koleksiyon değişmezlerinde if / else ifadelerini kullanma özelliğini ekledi. Bu şimdi şu şekilde yapılır:

return Column(children: <Widget>[
  Text("hello"),
  if (condition)
     Text("should not render if false"),
  Text("world")
],);

Flutter Sayı # 28181 - Listede satır içi koşullu oluşturma

Diğer cevaplar bundan bahsetmiyor, ayrıca şunları da yapabilirsiniz:

Oluşturucu widget'ını kullanın

Widget Oluşturucu Bir çocuk gereklidir Widget bir kapağın kullanılmasına izin içindir:

Alt parçacığını elde etmek için bir kapanış çağıran platonik bir parçacık.

Bir pencere öğesi oluşturmak için mantığa her ihtiyaç duyduğunuzda kullanışlıdır , özel bir işlev oluşturma ihtiyacını ortadan kaldırır. Ayrıca, anonim bir işlev kullanmaya kıyasla neyin daha net hale getirildiğini görüyorum.

Oluşturucu pencere aracını alt öğe olarak kullanırsınız ve mantığınızı builderyönteminde sağlarsınız. Örneğiniz şöyle:

Center(
  child: Builder(
    builder: (context) {
      if (condition) {
        return Container();
      } else {
        return Center();
      }
    }
  )
)

Böyle önemsiz bir örnekte üçlü operatör yeterli olacaktır ( child: condition ? Container() : Center()), ancak daha fazla mantık gerekiyorsa, Oluşturucu onu tutmak için uygun bir yer sağlar.

Ayrıca, diğer posterlerle mantığın UI kodundan çıkarılması gerektiği konusunda hemfikirim, ancak oluşturulacak parçacığı belirlemek için yalnızca bir switchveya if/ elseifadesi kullanıldığında, onu orada tutmayı tercih ederim (koşulun basit olması koşuluyla, örneğin bir ViewModel'deki değer). Builder pencere öğesi bu konuda yardımcı olabilir.

Flutter UI oluşturmak için koşullu mantığı kullanmanın kolay bir yolunun mantığı UI dışında tutmak olduğunu öğrendim. İşte iki farklı rengi döndürmek için bir işlev:

Color getColor(int selector) {
  if (selector % 2 == 0) {
    return Colors.blue;
  } else {
    return Colors.blueGrey;
  }
}

İşlev, CircleAvatar'ın arka planını ayarlamak için aşağıda kullanılır.

new ListView.builder(
  itemCount: users.length,
  itemBuilder: (BuildContext context, int index) {
    return new Column(
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            backgroundColor: getColor(index),
            child: new Text(users[index].name[0])
          ),
          title: new Text(users[index].login),
          subtitle: new Text(users[index].name),
        ),
        new Divider(height: 2.0),
      ],
    );
  },
);

Renk seçici işlevinizi çeşitli widget'larda yeniden kullanabileceğiniz için çok temiz.

Sadece koşullu bir ifade kullanabilirsiniz a==b?c:d

Örneğin :

Container(
  color: Colors.white,
  child: ('condition')
  ? Widget1(...)
  : Widget2(...)
)

Umarım anladınız.

Başka koşul yoksa SizedBox.shrink () kullanabileceğinizi varsayalım.

Container(
      color: Colors.white,
      child: ('condition')
       ? Widget1(...)
       : SizedBox.shrink()
    )

Eğer sütun ise ?:operatör yazmaya gerek yok

Column(
 children: <Widget>[
  if('condition')
    Widget1(...),
 ],
)

Bu tür blok ifadelerine sahip çocuklarda şahsen if / else ifadesini kullanıyorum. Yalnızca yukarıdaki Dart 2.3.0 sürümünü destekler.

eğer / değilse

Column(
    children: [
        if (_selectedIndex == 0) ...[
          DayScreen(),
        ] else ...[
          StatsScreen(),
        ],
    ],
 ),

eğer / değilse eğer

Column(
    children: [
        if (_selectedIndex == 0) ...[
          DayScreen(),
        ] else if(_selectedIndex == 1)...[
          StatsScreen(),
        ],
    ],
 ),

İşte çözüm. Ben düzelttim. İşte kod

child: _status(data[index]["status"]),

Widget _status(status) {
  if (status == "3") {
    return Text('Process');
  } else if(status == "1") {
    return Text('Order');
  } else {
    return Text("Waiting");
  }
}

bir widget listesi kullanıyorsanız, bunu kullanabilirsiniz:

class HomePage extends StatelessWidget {
  bool notNull(Object o) => o != null;
  @override
  Widget build(BuildContext context) {
    var condition = true;
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider Demo"),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          condition? Text("True"): null,
          Container(
            height: 300,
            width: MediaQuery.of(context).size.width,
            child: Text("Test")
          )
        ].where(notNull).toList(),
      )),
    );
  }
}

Başka bir alternatif: switch'sbirçok koşulda benzer ifadeler için haritaları kullanmayı seviyorum:

return Card(
        elevation: 0,
        margin: EdgeInsets.all(1),
        child: conditions(widget.coupon)[widget.coupon.status] ??
            (throw ArgumentError('invalid status')));


conditions(Coupon coupon) => {
      Status.added_new: CheckableCouponTile(coupon.code),
      Status.redeemed: SimpleCouponTile(coupon.code),
      Status.invalid: SimpleCouponTile(coupon.code),
      Status.valid_not_redeemed: SimpleCouponTile(coupon.code),
    };

Koşullu ifadeye dokunmadan koşul listesine öğe eklemek / kaldırmak daha kolaydır.

Başka bir örnek:

var condts = {
  0: Container(),
  1: Center(),
  2: Row(),
  3: Column(),
  4: Stack(),
};

class WidgetByCondition extends StatelessWidget {
  final int index;
  WidgetByCondition(this.index);
  @override
  Widget build(BuildContext context) {
    return condts[index];
  }
}

conditional_builder 1.0.2 kullanın

aşağıdaki bağlantıya bakın

Buraya Tıkla

Uygulama Örneği:

Bir düğme ile

bool _paused = false;

CupertinoButton(
  child: _paused ? Text('Play') : Text('Pause'),
  color: Colors.blue,
  onPressed: () {
    setState(() {
      _paused = !_paused;
    });
  },
),

**** Koşulları bu yöntemi kullanarak da kullanabilirsiniz ** **

 int _moneyCounter = 0;
  void _rainMoney(){
    setState(() {
      _moneyCounter +=  100;
    });
  }

new Expanded(
          child: new Center(
            child: new Text('\$$_moneyCounter', 

            style:new TextStyle(
              color: _moneyCounter > 1000 ? Colors.blue : Colors.amberAccent,
              fontSize: 47,
              fontWeight: FontWeight.w800
            )

            ),
          ) 
        ),

Bu harika bir makale ve sohbet. Üçlü operatörü açıklandığı gibi kullanmaya çalıştım. Ancak kod çalışmadı ve belirtildiği gibi bir hatayla sonuçlandı.

Column(children: [ condition? Text("True"): null,],);

Yukarıdaki üçlü örnek, yanlış liderliktir. Dart, widget yerine bir boş değer döndürüldüğünü belirten bir hata ile yanıt verir. Null döndüremezsiniz. Doğru yol, bir widget döndürmek olacaktır:

Column(children: [ condition? Text("True"): Text("false"),],); 

Üçlü sayının çalışması için bir Widget'ı iade etmeniz gerekir. Herhangi bir şeyi iade etmek istemiyorsanız, boş bir konteyner iade edebilirsiniz.

Column(children: [ condition? Text("True"): Container(),],); 

İyi şanslar.

Flutter'da koşullu render yapmak istiyorsanız şunu yapabilirsiniz:

Column(
   children: <Widget>[
     if (isCondition == true)
        Text('The condition is true'),
   ],
 );

Peki ya üçüncül (eğer-değilse) bir koşul kullanmak istiyorsanız? alt pencere öğesi çok katmanlı olduğunda.

Bunu, koşullu oluşturmayı geliştiren, if- else'i destekleyen ve koşulları değiştiren flutter_conditional_rendering çözümü için kullanabilirsiniz .

If-Else koşulu:

Column(
      children: <Widget>[
        Conditional.single(
          context: context,
          conditionBuilder: (BuildContext context) => someCondition == true,
          widgetBuilder: (BuildContext context) => Text('The condition is true!'),
          fallbackBuilder: (BuildContext context) => Text('The condition is false!'),
        ),
      ],
    );

Anahtar durumu:

Column(
      children: <Widget>[
        ConditionalSwitch.single<String>(
          context: context,
          valueBuilder: (BuildContext context) => 'A',
          caseBuilders: {
            'A': (BuildContext context) => Text('The value is A!'),
            'B': (BuildContext context) => Text('The value is B!'),
          },
          fallbackBuilder: (BuildContext context) => Text('None of the cases matched!'),
        ),
      ],
    );

(List<Widget>)Tek bir tane yerine bir widget listesini koşullu olarak oluşturmak istiyorsanız . Kullanım Conditional.list()veConditionalSwitch.list()!

Aylarca kullandıktan sonra Lol?: Bunu kullanabileceğimi öğrendim:

Column(
     children: [
       if (true) Text('true') else Text('false'),
     ],
   )

Dartta koşullu ifadeler için üçlü operatörü kullanabilirsiniz, kullanımı basittir

(condition) ? statement1 : statement2

eğer conditiondoğruysa, statement1aksi takdirde yürütülecektir statement2.

Pratik bir örnek almak

Center(child: condition ? Widget1() : Widget2())

Kullanmak için gidiyoruz eğer hatırla nullolarak Widget2kullanmak daha iyidir SizedBox.shrink()bazı ana widget'ları bir aldıktan sonra bir istisna çünkü nullçocuk.

Uygulamamda WidgetChooser, koşullu mantık olmadan widget'lar arasında seçim yapabilmek için bir widget oluşturdum :

WidgetChooser(
      condition: true,
      trueChild: Text('This widget appears if the condition is true.'),
      falseChild: Text('This widget appears if the condition is false.'),
    );

Bu, WidgetChooserwidget'ın kaynağıdır :

import 'package:flutter/widgets.dart';

class WidgetChooser extends StatelessWidget {
  final bool condition;
  final Widget trueChild;
  final Widget falseChild;

  WidgetChooser({@required this.condition, @required this.trueChild, @required this.falseChild});

  @override
  Widget build(BuildContext context) {
    if (condition) {
      return trueChild;
    } else {
      return falseChild;
    }
  }
}

Yalnızca titreşimli widget ise

if(bool = true) Container(

child: ....

),

OR

if(bool = true) Container(

child: ....

) else new Container(child: lalala),