행 내부의 TextField에서 레이아웃 예외가 발생 함 : 크기를 계산할 수 없음


147

해결 방법을 이해하지 못하는 렌더링 예외가 발생합니다. 3 행이있는 열을 만들려고합니다.

행 [이미지]

행 [텍스트 필드]

행 [버튼]

컨테이너를 빌드하는 코드는 다음과 같습니다.

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

텍스트 컨테이너에 대한 내 buildAppEntryRow 코드

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

실행할 때 다음 예외가 발생합니다.

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

buildAppEntryRow를 다음과 같이 TextField로 변경하면

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

더 이상 예외가 발생하지 않습니다. 행 구현에서 누락되어 해당 행의 크기를 계산할 수없는 것은 무엇입니까?

답변:


318

( 향후 Row에 다른 위젯을 배치하고 싶기 때문에 a를 사용한다고 가정합니다 TextField.)

Row위젯은이 유연한 사람 떠났다 것을 얼마나 많은 공간을 알 수 있도록 자사의 비 유연성 아이들의 고유 크기를 결정하고자합니다. 그러나 TextField고유 너비는 없습니다. 부모 컨테이너의 전체 너비로 크기를 조정하는 방법 만 알고 있습니다. 에 포장 Flexible하거나 남은 공간을 차지할 것으로 예상한다는 Expanded것을 알리십시오 .RowTextField

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),

3
이것은 어딘가에 설레는 의사가 아니어야합니까?
stt106

1
@ stt106-> flutter.io/docs/development/ui/layout/box-constraints 하지만 동의하기는 쉽지 않습니다. 또한 콜린 잭슨이 그랬던 것처럼 솔루션을 명확하게 만들지 않습니다.

이 방법을 사용 mainAxisAlignment하면 행 위젯 이 중단 됩니다. 두 개의 텍스트 위젯을 사용하면 아무런 문제가 없지만 텍스트 위젯과 텍스트 필드 위젯이 Flexible간격없이 왼쪽에 정렬됩니다.
Hasen

Flutter 관련 질문을 여기에서 살펴 보도록하겠습니다. stackoverflow.com/questions/60565658/… ?
14:09의 Istiaque Ahmed

30

TextField가로 방향으로 확장되고이 때문에이 오류가 발생하므로 Row의 너비를 제한해야 TextField합니다. 여러 가지 방법이 있습니다.

  1. 사용하다 Expanded

     Row(
      children: <Widget>[
        Expanded(child: TextField()),
        OtherWidget(),
      ],
    )
    
  2. 사용하다 Flexible

    Row(
      children: <Widget>[
        Flexible(child: TextField()),
        OtherWidget(),
      ],
    )
    
  3. 그것을 감싸 Container거나 SizedBox제공하십시오width

    Row(
      children: <Widget>[
        SizedBox(width: 100, child: TextField()),
        OtherWidget(),
      ],
    )       
    

2
이 추천은 매우 유용합니다. TextField한 행에 여러 개가 있는 경우
Ben

11

행 내에서 텍스트 필드를 사용하려면 융통성을 사용해야합니다.

new Row(
              children: <Widget>[
                new Text("hi there"),
                new Container(
                  child:new Flexible(
                        child: new TextField( ),
                            ),//flexible
                ),//container


              ],//widget
            ),//row

나는 당신이 필요하지 않다고 생각합니다 . 직접 Container사용할 수 Flexible있습니다.
Felipe Augusto

6

해결책은 Text()내부 Expanded또는 다음 위젯 중 하나 를 감싸는 것 Flexible입니다. 확장을 사용하는 코드는 다음과 같습니다.

Expanded(
           child: TextField(
             decoration: InputDecoration(
               hintText: "Demo Text",
               hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
              ),
           ),
        ),

5

@Asif Shiraz가 언급했듯이 똑같은 문제가 있고 Flexible에 Wrapping Column을 사용 하여이 문제를 해결했습니다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new Scaffold(
          body: Row(
            children: <Widget>[
              Flexible(
                  child: Column(
                children: <Widget>[
                  Container(
                    child: TextField(),
                  )
                  //container
                ],
              ))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
        ));
  }
}

0

간단한 해결책은 Text()내부 를 감싸는 것 Container()입니다. 따라서 코드는 다음과 같습니다.

Container(
      child: TextField()
)

여기에서 컨테이너의 너비 및 높이 속성을 가져와 텍스트 필드의 모양과 느낌을 조정할 수 있습니다. Flexible컨테이너 내부에 텍스트 필드를 래핑 하는 경우 사용할 필요가 없습니다 .


1
추가하지 않고 질문을 해결하지 마십시오width: n
user3249027
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.