Закругленные углы изображения внутри просмотра страницы, сохраняющие соотношение колеблющихся

ProgramBox

Закругленные углы изображения внутри просмотра страницы, сохраняющие соотношение колеблющихся

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#flutter #dart #rounded-corners #clip #flutter-pageview

Вопрос:

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

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

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

Результат :

Код :

 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)
        )
    );
  }

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

Что я здесь упускаю ?

Ответ №1:

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

Но нам нужно заполнение за пределами Контейнера и без радиуса границы. Значит, после украшения изображения просто добавьте немного отступов. Вы можете следить за этим, и использование 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,
                    ),
                  ),
                ),
              ),
            ),

1. Согласитесь, что для маржи я быстро писал этот образец . Но я не хочу использовать Boxfit.cover , как я уже сказал в своем вопросе , я хочу сохранить начальное соотношение изображений. с этой коробкой соотношение посадок нарушается

2. Означает, что изображение получит точный размер и будет иметь угловую границу?

3. Да, как на моем снимке экрана, но с закругленными углами. это прекрасно работает в простом списке, но не здесь, и я не знаю, почему

4. Вы используете height: 50 , означает ли это, что вам нравится иметь подходящий рост ?

5. Я обновил виджет, теперь это решает вашу проблему?

Ответ №2:

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

 @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. Извините, не могу использовать ListView в этом случае

2. Почему? Просмотр страниц не работает с динамической шириной.

3. Чего именно вы хотите достичь? С помощью просмотра страниц вы уже определяете ширину, viewportFraction а затем высоту. Просмотр страниц не позволяет динамически регулировать ширину дочерних элементов.

4. Я уже знаю об этом, и это хорошее решение при использовании списка. Мне нужно, чтобы здесь был эффект привязки и медленное управление движением для случая использования. Я также знаю, что существуют плагины, имитирующие поведение просмотра страниц для списков, но у меня были конфликты с этим в моем приложении. Спасибо за ответ

Ответ №3:

Попробуйте добавить BoxFit.обложку в виджет 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,),
        )
    );
  }