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

Program / 글쓴이

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

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 문을 사용할 수 없습니까?

답변

사실 당신은 할 수 사용 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"));

답변

다트에서, 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);
}

답변

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

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

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

답변

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

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 논리 인 경우에는 유지하는 것이 더 읽기 쉽습니다.

답변

조건부 논리를 사용하여 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),
      ],
    );
  },
);

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

답변

나는 개인적으로 이런 종류의 블록 문을 가진 아이들에게 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(),
        ],
    ],
 ),

답변

조건문을 사용하면됩니다. 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(...),
 ],
)