Question

我当时正在用Flutter编写类似自动完成的屏幕，但是在运行flutter test时出错：

The following assertion was thrown during layout:
A RenderFlex overflowed by 99472 pixels on the bottom.

Widget creation tracking is currently disabled. Enabling it enables improved error messages. It can
be enabled by passing `--track-widget-creation` to `flutter run` or `flutter test`.

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#d56d6 OVERFLOWING:
  needs compositing
  creator: Column ← Padding ← Container ← ShopNow ← Semantics ← Builder ←
    RepaintBoundary-[GlobalKey#5065e] ← IgnorePointer ← AnimatedBuilder ← FadeTransition ←
    FractionalTranslation ← SlideTransition ← ⋯
  parentData: offset=Offset(36.0, 36.0) (can use size)
  constraints: BoxConstraints(w=728.0, h=528.0)
  size: Size(728.0, 528.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down

引发此错误的小部件测试是：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:iwfpapp/screens/shop/main.dart';

import 'screen_validator.dart';

void main() {
  testWidgets('test shop widget render no crash', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      title: 'stand-alone shop widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShopNow(),
    ));
    validateShopScreenContent();
  });
}

顶级窗口小部件ShopNow如下所示：

import 'package:flutter/material.dart';
import 'package:iwfpapp/widgets/inputs/shop_category_filter_input.dart';
import 'suggestions.dart';

class ShopNow extends StatefulWidget {
  const ShopNow({Key key}) : super(key: key);

  @override
  _ShopNow createState() {
    return _ShopNow();
  }
}

class _ShopNow extends State<ShopNow> {
  List<ShopCategory> suggestions = [
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(36.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ShopCategoryFilterInput(),
            Suggestions(suggestions),
          ],
        ));
  }
}

建议使用ListView：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategory {
  final String name;
  const ShopCategory(this.name);
}

class Suggestions extends StatelessWidget {
  final List<ShopCategory> suggestions;
  const Suggestions(this.suggestions);
  @override
  Widget build(BuildContext context) {
    List<Widget> suggestionWidgets = suggestions.map((ShopCategory suggestion) {
      return Column(
        children: <Widget>[
          SizedBox(height: 25.0),
          Material(
              elevation: 5.0,
              color: Colors.teal[100],
              borderRadius: BorderRadius.circular(30.0),
              child: MaterialButton(
                  minWidth: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                  onPressed: () {},
                  child: Text(suggestion.name,
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.black45))))
        ],
      );
    }).toList();
    return Expanded(
        child: ListView(
            padding: const EdgeInsets.all(8.0), children: suggestionWidgets));
  }
}

引发错误的文本字段组件如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container (
      child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))));
  }
}

我在想，尽管错误来自ShopCategoryFilterInput，但是我的直觉是它与其余代码有关。任何帮助都非常感谢！

Answer 1

您必须添加一个材料小部件支架或用于文本样式信息的材料

尝试一下

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(child: Container (
      child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))));
  }
}`

Answer 2

用SingleChildScrollView（）包装容器

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container (
      
      )
    );
  }

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container (
       child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))))
     );
  }
}

Flutter TextField错误：RenderFlex在底部溢出了99472像素

2 个答案:

用SingleChildScrollView（）包装容器