본문 바로가기

개발하자

모든 장치에서 컨테이너 자동 확장

반응형

모든 장치에서 컨테이너 자동 확장

자동 확장할 텍스트가 있는 컨테이너가 필요합니다. 나는 API 호출이 있는데, 5단어에서 500단어까지 가능하다. 나는 크기가 큰 고정 사이즈 하나만 갖고 싶지 않지만, 10개의 단어를 포함하고 있다.

나는 확장()과 크기 상자를 사용해 보았다.확장(), 그러나 내가 그것들을 잘못 사용하고 있을 수 있다

Card( 
 elevation: defaultTargetPlatform ==
      TargetPlatform.android ? 5.0 : 0.0,
  child: Column(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.all(0.0),
        padding: const EdgeInsets.all(2.0),
        decoration: BoxDecoration(color: Colors.black),
        width: _screenSize.width,
        height: 250,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.black,
              width: _screenSize.width,
              height: 35,
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 15, top: 11),
                child: Text("Title".toUpperCase(),
                  style: TextStyle(
                      color: Colors.white
                  ),
                ),
              ),
            ),
            Container(
              color: Colors.white,
              width: _screenSize.width,
              height: 210,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8, bottom: 5),
                    child: Text("Title of expanding text", style: TextStyle(
                      fontSize: 25,
                    ),
                    ),
                  ),
                  Text("Expanding text", style: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.w800
                  ),),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),

컨테이너를 확장하기만 하면 되지만 작게 유지/커져라




를 사용하면 사용 가능한 영역에 따라 텍스트 크기를 조정할 수 있습니다.

다음과 같이 사용할 수 있습니다:

FittedBox(child: Text('...............Your text...............'));



당신은 지정하지 않으려고 노력해 본 적이 있나요? 이 경우 어린이에 따라 포장해야 합니다.

그렇지 않으면 위젯에는 높이, 너비, 제약 조건 및 정렬이 없지만 하위 항목이 있으며 컨테이너는 제약 조건을 상위 항목에서 하위 항목으로 전달하고 하위 항목에 맞게 크기를 조정합니다.

위는 에 대한 공식 문서에서 발췌한 것이다.

다음은 공식 문서입니다.




제약 조건을 사용하는 것이 좋습니다...텍스트 하위 요구 사항에 따라 컨테이너 높이를 설정합니다. 예제를 참조하십시오...

Container(
    constraints: BoxConstraints(
    maxHeight: double.infinity,
),
child: Column(
children: [
  Text(
    'Hello flutter...i like flutter...i like google...',
    softWrap: true,
    style: TextStyle(
        color: Colors.white, fontSize: 20 , ),

  ),],),)



나 역시 문자 수가 증가함에 따라 텍스트 위젯이 확장되지 않는 컨테이너를 가지고 있었다. 위젯 트리 컨테이너 -> 고유 너비 -> 텍스트/텍스트 필드를 만들면 내게 잘 맞는 것 같다.

고유 너비는 컨테이너 크기를 하위 크기로 조정합니다.




우리는 단지 아이 내부나 아이가 설정된 곳에 속성을 추가하면 된다

예를들면

AnythingYourWidget(
  child: Container(
    child: Column( // For Example Column
      mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
      children: [
          // YourWidget
      ]
    )
  )
),

반응형