У меня есть PageView со списком изображений внутри. Я хочу сохранить пропорции изображения и сделать для них закругленные углы.

Обычно у меня не возникало проблем с вырезанием изображения внутри простого списка или одного изображения.

Но в этом случае ClipRRect не оборачивает изображение, и когда я устанавливаю размер на красный Container, ничего не происходит.

Результат:

enter image description here

Код:

double maxiHeight = 250;
  List<Widget> postList = [];

  @override
  void initState() {
    for(Post p in Model.instance.postList) {
      postList.add(post(p));
    }
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      height: maxiHeight,
      child: PageView(
          controller: PageController(viewportFraction: 0.5),
          children: postList
      ),
    );
  }


  Widget post(Post post) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
        child: Container(
            margin: EdgeInsets.only(right: 10),
            color: Colors.red,
            child: Image.network(post.thumb, height: 50)
        )
    );
  }

Я хочу сохранить соотношение сторон изображения.

Что мне здесь не хватает?

2
nicover 17 Сен 2021 в 15:57

3 ответа

Лучший ответ

Что касается фрагмента кода, вы предоставляете маржу справа 1-й, а затем оборачиваете ее с помощью ClipRRect. Здесь основной Контейнер получает свой размер и затем использует маржу, после обертывания ClipRRect он избегает 10px справа от Clip. Вот как мы получаем текущий результат.

Но нам нужны отступы вне контейнера и без радиуса границы. Значит после декорирования изображения просто сделайте отступ. Вы можете следить за этим, и использование fit: BoxFit.cover покроет размер виджета.

      Center(
              child: Padding(
                padding: EdgeInsets.only(right: 10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    // margin: EdgeInsets.only(right: 10),// not here
                    color: Colors.red,
                    child: Image.network(
                      // post.thumb,
                      "https://unsplash.it/1440/3040?random",
                      // fit: BoxFit.fitHeight,
                      height: 150,
                    ),
                  ),
                ),
              ),
            ),
2
Yeasin Sheikh 17 Сен 2021 в 13:30

Со следующим измененным кодом он должен работать:

@override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 500.0,
        child: ListView(scrollDirection: Axis.horizontal, children: postList),
      ),
    );
  }

  Widget post(String uri) {
    return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 5.0),
       child: ClipRRect(
         borderRadius: BorderRadius.circular(20),
         child: Image.network(uri, fit: BoxFit.fitHeight)
      ),
    );
  }
1
Mäddin 17 Сен 2021 в 13:54

Попробуйте добавить BoxFit.cover в виджет Image.network

Widget post(Post post) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
        child: Container(
            margin: EdgeInsets.only(right: 10),
            color: Colors.red,
            child: Image.network(post.thumb, height: 50, fit: BoxFit.cover,),
        )
    );
  }
0
Yair Chen 17 Сен 2021 в 13:20