>source

인터넷에서 최고의 이미지를 다운로드 한 목록 타일을 만들고 있습니다. 이미지는 가로 또는 세로 일 수 있습니다. 제목 텍스트 변경에 사용 가능한 이미지 크기 공간을 기준으로합니다.

인터넷에서 이미지를 다운로드하면 사용 가능한 공간이 다시 조정됩니다.

이 문제를 해결하기 위해 Flexible widget과 TextOverflow.ellipsis를 사용했습니다. 부제목을 추가하기 위해 열에 융통성을 추가 할 때까지 이것은 잘 작동합니다.

이제 더 긴 제목 텍스트에 대해 오버플로 오류가 발생합니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8),
                bottomLeft: Radius.circular(8)),
            child: FadeInImage(
              placeholder: AssetImage('images/placeholder-image.png'),
              image: NetworkImage(post.imageURL),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Container(
                padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                child: new Text(
                  post.title,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 15,
                      color: Theme.of(context).primaryColor),
                ),
              ),
            ),
          ],
        ),
      ],
    )


  • 답변 # 1

    ColumnFlexible 포장하는 대신 TextFlexible :

    Flexible(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                      child: new Text(
                        post.title,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 15,
                            color: Theme.of(context).primaryColor),
                      ),
                    ),
                  ],
                ),
              ),
    
    

  • 답변 # 2

    사용하다 Expanded

    class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
              child: ClipRRect(
                borderRadius: const BorderRadius.horizontal(
                  left: Radius.circular(8),
                ),
                child: FadeInImage(
                  placeholder: NetworkImage('https://picsum.photos/100'),
                  image: NetworkImage('https://picsum.photos/100'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Title',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      'Subtitle',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        );
      }
    }
    
    

  • 이전 ionic framework - 각도 로딩 페이지
  • 다음 javascript - 투명 사각형 영역 내에서 개체를 제한하는 방법 - fabricjs?