ListView 中的 Flutter Row

Question

我正在尝试在 ListView 中添加一个 Row，但出现错误

I/flutter (13858): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (13858): The following assertion was thrown during performLayout():
I/flutter (13858): BoxConstraints forces an infinite height.
I/flutter (13858): These invalid constraints were provided to RenderParagraph's layout() function by the following
I/flutter (13858): function, which probably computed the invalid constraints in question:
I/flutter (13858):   RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:805:17)
I/flutter (13858): The offending constraints were:
I/flutter (13858):   BoxConstraints(w=72.0, h=Infinity)

按照为该错误找到的指导，我尝试将我的 ListView 包装在 Expanded 中，但这只会导致 Expanded widgets must be placed inside Flex小部件。，这导致我尝试另一种方法....并以同样的错误结束。

我的小部件在下面。有没有办法让它工作？我最终想要做的是显示多组行，行之间有一些文本，允许用户上下滚动页面。

class _RoutineEditState extends State<RoutineEdit> {
  String routineName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Routine'),
      ),
      body: ListView(
        //padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
        children: <Widget>[
          Text('ddedede'),
          Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Set'),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

因为我不知道你想要的布局。

只是为了修复错误。我们有三个选择。

首先:使用 - IntrinsicHeight 小部件。

代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Routine'),
      ),
      body: ListView(
        //shrinkWrap: true,
        //padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
        children: <Widget>[
          Text('ddedede'),
          IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Set'),
                Text('Set'),
                Text('Set'),
              ],
            ),
          ),
        ],
      ),
    );
  }

第二:将您的行包裹在 LimitedBox 中并保持 - crossAxisAlignment: CrossAxisAlignment.stretch

代码:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Routine'),
      ),
      body: ListView(
        shrinkWrap: true,
        //padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
        children: <Widget>[
          Text('ddedede'),
          LimitedBox(
            maxHeight: 200.0,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Set'),
                Text('Set'),
                Text('Set'),
              ],
            ),
          ),
        ],
      ),
    );
  }

第三: 删除或注释 - crossAxisAlignment: CrossAxisAlignment.stretch

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Routine'),
      ),
      body: ListView(
        shrinkWrap: true,
        //padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
        children: <Widget>[
          Text('ddedede'),
          Row(
           // crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Set'),
              Text('Set'),
              Text('Set'),
            ],
          ),
        ],
      ),
    );
  }