Flutter: динамика высоты изображения будет изменяться в соответствии с увеличением и уменьшением высоты текста

#image #flutter #dart #text #gridview

#изображение #трепетание #dart #текст #просмотр сетки

Вопрос:

я устанавливаю изображение сверху, а многострочный текст снизу в индексе GridView-builder. затем я хочу, чтобы размер высоты изображения изменялся динамически, в то время как строка текста будет изменена. предположим, когда нижняя текстовая строка увеличится, тогда высота верхнего изображения будет уменьшена в индексе.

  class category_route extends StatelessWidget {


 @override
 Widget build(BuildContext context) {



var sizeDevice = MediaQuery.of(context).size;
final orientation = MediaQuery.of(context).orientation;

final double itemHeight = (sizeDevice.height - kToolbarHeight - 24) / 3;
final double itemWidth = sizeDevice.width / 3;



return MaterialApp(
  home: Scaffold(

    backgroundColor: Colors.yellow,

    body: GridView.builder(
      padding: EdgeInsets.all(8),
      itemCount: categoryTitleArray.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        childAspectRatio: (itemWidth / itemHeight),
      ),


      itemBuilder: (BuildContext context, int index) {
        return new Card(

        child: new GridTile(
          
            child:  Image.asset(categoryImageArray[index],
            ),
            footer: Text("${categoryTitleArray[index]}"),

          ),
        );
      },
    ),


  ),
);
}
}
  

Ответ №1:

вместо использования GridTile, пожалуйста, используйте это

 return 
new Card(
  child: new Column(
    children: [
      Expanded(
        child: Image.network(
          categoryImageArray[index],
        ),
      ),
      Text("${categoryTitleArray[index]}")
    ],
  ),
);
  

Я протестировал это и отлично работает. Надеюсь, я отвечу на вопрос.