Flutter Widget (Center Widget)의 자식 속성 내에서 조건문을 사용하는 방법

Question 1

지금까지 위젯 내에서 조건문을 사용해야 할 때마다 다음을 수행했습니다 (간단한 더미 예제로 센터 및 컨테이너 사용).

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

if / else 문을 사용하려고하면 데드 코드 경고가 표시됩니다.

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

흥미롭게도 나는 switch case 문으로 시도했지만 동일한 경고를 표시하므로 코드를 실행할 수 없습니다. 내가 뭘 잘못하고 있는지 아니면 죽은 코드가 있다고 생각하지 않고 if / else 또는 switch 문을 사용할 수 없습니까?

Question 2

사실 당신은 할 수 사용 if/else및 switch다트 / 플러터의 다른 문 인라인.

즉각적인 익명 기능 사용

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

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

즉, 당신의 문장을 함수로 감싼다

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

UI '마크 업'에 너무 많은 로직을 직접 넣지 말 것을 강력히 권장하지만 Dart의 유형 추론에는 약간의 작업이 필요하므로 이러한 시나리오에서 유용 할 수 있습니다.

삼항 연산자 사용

condition ? Text("True") : null,

컬렉션에서 If 또는 For 문 또는 스프레드 연산자 사용

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

방법 사용

child: getWidget()

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

스위치 문 재정의

삼항 연산자에 대한 또 다른 대안으로 https://stackoverflow.com/a/57390589/1058292 게시물과 같이 switch 문의 함수 버전을 만들 수 있습니다 .

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

Question 3

다트에서, if/else그리고 switch문없는 표현이다. 값을 반환하지 않으므로 생성자 매개 변수에 전달할 수 없습니다. 빌드 메서드에 많은 조건부 논리가있는 경우이를 시도하고 단순화하는 것이 좋습니다. 예를 들어 자체 포함 된 논리를 메서드로 이동하고 if/else문을 사용 하여 나중에 사용할 수있는 지역 변수를 초기화 할 수 있습니다.

방법 및 if / else 사용

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

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

사용 `if/else`

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

Question 4

기록을 위해 Dart 2.3은 컬렉션 리터럴에서 if / else 문을 사용하는 기능을 추가했습니다. 이제 다음과 같은 방식으로 수행됩니다.

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

Flutter Issue # 28181-목록의 인라인 조건부 렌더링

Question 5

이 경우 삼항 연산자를 사용하는 것이 좋습니다.

child: condition ? Container() : Center()

다음과 같은 형식의 코드를 피하십시오.

if (condition) return A else return B

삼항 연산자보다 불필요하게 더 장황합니다.

그러나 더 많은 논리가 필요한 경우 다음을 수행 할 수도 있습니다.

빌더 위젯 사용

위젯 빌더 아이 필요한 위젯 때 폐쇄의 사용을 허용위한 것입니다 :

하위 위젯을 얻기 위해 클로저를 호출하는 플라토닉 위젯.

위젯을 빌드하기 위해 로직이 필요할 때마다 편리하며 전용 함수를 만들 필요가 없습니다.

Builder 위젯을 자식으로 사용하고 해당 builder메서드에 논리를 제공합니다 .

Center(
  child: Builder(
    builder: (context) {
      // any logic needed...
      final condition = _whateverLogicNeeded();
      
      return condition
          ? Container();
          : Center();
    }
  )
)

빌더는 창조 논리를 보관할 수있는 편리한 장소를 제공합니다. atreeon이 제안한 즉각적인 익명 기능보다 더 간단합니다.

또한 논리가 UI 코드에서 추출되어야한다는 데 동의하지만 실제로 UI 논리 인 경우에는 유지하는 것이 더 읽기 쉽습니다.

Question 6

조건부 논리를 사용하여 Flutter UI를 빌드하는 쉬운 방법은 논리를 UI 외부에 유지하는 것임을 알았습니다. 다음은 두 가지 색상을 반환하는 함수입니다.

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

이 기능은 CircleAvatar의 배경을 설정하는 데 사용됩니다.

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),
      ],
    );
  },
);

여러 위젯에서 색상 선택기 기능을 재사용 할 수 있으므로 매우 깔끔합니다.

Question 7

나는 개인적으로 이런 종류의 블록 문을 가진 아이들에게 if / else 문을 사용합니다. 위의 Dart 버전 2.3.0에서만 지원됩니다.

다른 경우라면

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

만약 / 그렇지 않다면

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

Question 8

조건문을 사용하면됩니다. a==b?c:d

예 :

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

나는 당신이 아이디어를 얻었기를 바랍니다.

다른 조건이 없다면 SizedBox.shrink ()를 사용할 수 있습니다.

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

열이면 ?:연산자 를 쓸 필요가 없습니다.

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

Question 9

여기에 해결책이 있습니다. 나는 그것을 고쳤다. 다음은 코드입니다.

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");
  }
}

Question 10

위젯 목록을 사용하는 경우 다음을 사용할 수 있습니다.

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(),
      )),
    );
  }
}

Question 11

또 다른 대안 : switch's조건이 많은 ' '와 같은 문에 대해지도를 사용하는 것을 좋아합니다.

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

조건문을 건드리지 않고도 조건 목록에 요소를 추가 / 제거하는 것이 더 쉽습니다.

다른 예시:

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];
  }
}

Question 12

몇 달 후에 Lol? : 나는 이것을 사용할 수 있다는 것을 알았습니다.

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

Question 13

이것은 훌륭한 기사이자 대화입니다. 설명 된대로 삼항 연산자를 사용하려고했습니다. 그러나 코드가 작동하지 않아 언급 한대로 오류가 발생했습니다.

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

위의 삼항 예제는 미스 리딩입니다. Dart는 위젯 대신 null이 반환되었다는 오류로 응답합니다. null을 반환 할 수 없습니다. 올바른 방법은 위젯을 반환하는 것입니다.

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

삼항이 작동하려면 위젯을 반환해야합니다. 아무것도 반환하지 않으려면 빈 컨테이너를 반환 할 수 있습니다.

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

행운을 빕니다.

Question 14

버튼 첨부

bool _paused = false;

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

Question 15

****이 방법을 사용하여 조건을 사용할 수도 있습니다 ** **

 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
            )

            ),
          ) 
        ),

Question 16

flutter에서 조건부 렌더링을 수행하려면 다음을 수행 할 수 있습니다.

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

그러나 3 차 (if-else) 조건을 사용하려면 어떻게해야합니까? 하위 위젯이 다중 계층 일 때.

조건부 렌더링을 향상시키고 if-else 및 스위치 조건을 지원하는 flutter 패키지를 flutter_conditional_rendering 솔루션에 사용할 수 있습니다 .

If-Else 조건 :

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!'),
        ),
      ],
    );

스위치 조건 :

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>)단일 위젯 대신 조건부로 위젯 목록을 렌더링하려는 경우 . 사용 Conditional.list()및ConditionalSwitch.list()!

Question 17

내 앱에서 WidgetChooser조건부 논리없이 위젯 중에서 선택할 수 있도록 위젯을 만들었습니다 .

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

다음은 WidgetChooser위젯 의 소스입니다 .

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;
    }
  }
}

Question 18

dart에서 조건문에 삼항 연산자를 사용할 수 있습니다. 사용법은 간단합니다.

(condition) ? statement1 : statement2

(가) 경우 condition사실 그는 statement1달리 실행됩니다 statement2.

실용적인 예를 들어

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

당신이 사용하려는 경우 기억 null으로 Widget2그것을 사용하는 것이 좋습니다 SizedBox.shrink()일부 부모 위젯이 점점 후 예외가 발생합니다 때문에 null아이를.

Question 19

진동 위젯 인 경우에만

if(bool = true) Container(

child: ....

),

OR

if(bool = true) Container(

child: ....

) else new Container(child: lalala),