как автоматически изменять размер карты во флаттере в зависимости от содержимого

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

Вот мой код:

import 'package:flutter/material.dart';
import 'package:finsec/widget/single_line_list_view.dart';
import 'package:finsec/widget/header.dart';

import 'package:finsec/data/cardview_list_item.dart';

class cardView extends StatelessWidget {
  cardView({
    this.header,
    this.elevation,
    this.padding,
    this.query,
    this.iconColor
  });

  String header, query;
  double elevation, padding;
  Color iconColor;

  final shape = const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
        bottomLeft: Radius.circular(8.0),
        bottomRight: Radius.circular(8.0),
      )
  );

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0.0, padding, 0.0, 0.0),  //vertical padding between cardivew and $s0.00
      child: new Card(
        elevation: elevation,
        shape: shape,
        child: new Container(
          width: MediaQuery
              .of(context)
              .size
              .width,
          height: 165.00,
          child: new Column(
            children:[
              Header(text: header,
                textSize: 24.0,
                backgroundColor: Color(0xffC4C4C4),
                textColor: Colors.black,
                height: 50,
                padding: 20.0,
                headerRadius: 8.0
              ),
            CardviewListItemData(query)  //listview goes here

            ],
          ),
        ),
      ),
    );
  }
}

Если мой список возвращает 2 элемента, то cardview выглядит нормально, но после 3 или более элементов я получаю ошибку пикселя переполнения. Причина в том, что я вручную устанавливаю высоту контейнера на 165,00.
см. Рис. Ниже

введите описание изображения здесь

Как я могу исправить свой код, чтобы размер карты автоматически изменялся в зависимости от количества элементов в моем списке? Например, если мой listview возвращает 5 элементов, то cardview должен отображать все пять элементов. Я не могу установить высоту вручную, потому что не знаю количество элементов в списке. Есть ли способ динамически изменять размер представления карты, чтобы отображать любое количество элементов, возвращаемых представлением списка?


flutter dart flutter-layout flutter-widget cardview
person yoohoo    schedule 30.09.2019    source источник
comment
Отвечает ли это на ваш вопрос? Как заставить флаттер-карту автоматически настраивать ее высота зависит от содержания   -  person Paresh Mangukiya    schedule 03.12.2020

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете попытаться окружить свою карточку виджетом Row внутри виджета IntrinsicHeight с помощью crossAxisAlignment: CrossAxisAlignment.stretch

При этом дочерние элементы Row (ваши карты) будут расширяться по вертикали, но Row займет наименьшее количество доступного вертикального пространства.

Container(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        YourCard(
          width: 20.0,
        ),
      ],
    ),
  )
)
person Anirudh Bagri    schedule 30.09.2019
comment
спасибо Anirudh, но я попробовал ваше решение и не работает. я получаю следующую ошибку. ╡ ИСКЛЮЧЕНИЕ, ВЫЯВЛЕННОЕ ПРИ ПРЕДОСТАВЛЕНИИ БИБЛИОТЕКИ I / flutter (6170): Следующее утверждение было выдано во время performLayout (): I / flutter (6170): RenderShrinkWrappingViewport не поддерживает возврат внутренних размеров. I / flutter Расчет внутренних размеров потребует создания экземпляра каждого дочернего элемента области просмотра, который I / flutter (6170): устраняет ленивость точки просмотра. I / flutter (6170): если вы просто пытаетесь сжать область просмотра в направлении главной оси, вы сможете - person yoohoo; 30.09.2019
comment
это случается, когда контейнер не имеет фиксированного размера. Можешь попробовать добавить к нему высоту и ширину? - person Anirudh Bagri; 30.09.2019
comment
Я добавил высоту, но все еще ошибки. Можете ли вы написать / закодировать пример просмотра списка внутри автомобиля, чтобы показать, как вы решаете проблему, и поделиться кодом со мной? - person yoohoo; 30.09.2019

arrow_upward
0
arrow_downward

Похоже, что ListView находится внутри столбца, попробуйте обернуть CardviewListItemData в гибкий виджет.

person roipeker    schedule 30.09.2019