Flutter：图片高度动态会随着文字高度的增减而改变

Question

我在 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]}"),

          ),
        );
      },
    ),


  ),
);
}
}

Answer 1

不要使用 GridTile 请使用这个

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

我对此进行了测试并且运行良好。希望我回答问题。

Flutter：图片高度动态会随着文字高度的增减而改变

Flutter: Image height dynamic will be changed according to text height increase and decrease

text

gridview

image

dart

flutter