底部溢出 21 个像素的 RenderFlex答案

【问题标题】：A RenderFlex overflowed by 21 pixels on the bottom底部溢出 21 个像素的 RenderFlex
【发布时间】：2021-08-27 19:32:30
【问题描述】：

我是新手，我尝试使用网格视图，但它显示了一个渲染弯曲，底部溢出了 21 个像素。在 GridView 我使用图片，但它显示错误。谁知道怎么修它？谢谢

我在互联网上搜索，它使用 SingleChildScrollView，但我不想使用它，因为它在 Grid 视图中看起来很奇怪

这是我的代码

import 'package:flutter/material.dart';
import 'package:monger_app/page/detail.dart';

class BudgetSettings extends StatefulWidget {
  @override
  _BudgetSettingsState createState() => _BudgetSettingsState();
}

class _BudgetSettingsState extends State<BudgetSettings> {
  List<Container> categorylist = new List();

  var character=[
    {"name":"Food", "image":"food.png"},
    {"name":"Social-Life", "image":"travel.png"},
    {"name":"Transportation", "image":"transportation.png"},
    {"name":"Beauty", "image":"makeup.png"},
    {"name":"Household", "image":"household.png"},
    {"name":"Education", "image":"education.png"},
    {"name":"Health", "image":"health.png"},
    {"name":"Gift", "image":"gift.png"},
    {"name":"Other", "image":"other.png"},
  ];
  _makelist() async {
    for (var i = 0; i < character.length; i++) {
      final newcharacter = character[i];
      final String image = newcharacter["image"];
      categorylist.add(
        new Container(
          padding: new EdgeInsets.all(20.0),
          child: new Card( child:
            new Column(
                  children: <Widget>[
                    new Image.asset('assets/$image', fit: BoxFit.cover,),
                    new Padding(padding: new EdgeInsets.all(5.0),),
                    new Text(newcharacter['name'], style: new TextStyle(fontSize: 18.0),),
                  ],
                ),
            ),
            )
        );
    }
  }

  @override
  void initState() {
    _makelist();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Budget Setting'),
      ),

      body: new GridView.count(
          crossAxisCount: 2,
          children: categorylist,
      ),
    );
  }
}

这里是我的输出

【问题讨论】：

标签： flutter android-studio gridview flutter-layout

【解决方案1】：

解决您的问题的一个简单方法是将您的图像小部件包装在一个灵活的小部件中，就像这样：

Flexible(
  child: Image.asset('assets/$image', fit: BoxFit.cover,),
),

【讨论】：