it-swarm.dev

Flutter에서 컨테이너의 최대 너비 제한

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

이것은 내 위젯의 빌드 방법이며 전달한 항목에 따라이 UI를 렌더링합니다. msg paramter

  1. 텍스트 로딩 enter image description here
  2. 매우 긴 텍스트 enter image description here

이제 내가 직면 한 문제는 너비를 설정하지 않고이 컨테이너/파란색 상자 안에 텍스트를 줄 바꿈 할 수 없다는 것입니다. 그러나 컨테이너/파란색 상자의 너비를 설정하면 텍스트의 길이에 관계없이 항상 넓게 유지됩니다 .

이제 컨테이너/블루 박스의 maxWidth (500과 같은)를 설정하는 방법이 있습니까? 파란색 상자는 "로드 중"과 같은 작은 텍스트에 필요한만큼 넓어지고 긴 텍스트의 경우 너비가 500 단위에 도달 할 때까지 확장 된 다음 텍스트를 줄 바꿈합니까?

긴 텍스트에 필요한 출력 :

로딩과 같은 작은 텍스트의 경우 UI에서 변경을 원하지 않지만 긴 텍스트의 경우 다음과 같이 표시됩니다. enter image description here

14
Nishant Desai

다음과 같이 선호하는 maxWidth를 사용하여 컨테이너 위젯에 제한 조건을 추가 할 수 있습니다.

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

이게 도움이 되길 바란다!

36
Kappadona

텍스트 주위에 Flexible을 사용한 다음 Flexible 크기의 고정자를 사용하여 Flex를 감쌀 수 있습니까? 그냥 생각이야.

0
user11209319