android - 如何通过创建一个由3个容器(左，中，右部分)组成的单独的ListView来避免无限的高度声明

Question

我正在尝试创建一个单独的Listview，如下图所示。每个ListView-elemet都应包含3个容器(左侧部分，中间部分，右侧部分)。有一个应用程序按钮，它将在按下时创建一个新的Listview-Element。
enter image description here

我已经成功创建了listview和容器，但是收到以下异常:rendering呈现库捕获到异常═════════════════════ ════════════════════════════════
在performLayout()期间引发了以下断言:
BoxConstraints强制无限高。

这是我的代码:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: ToDo()));

class ToDo extends StatelessWidget {
  // This widget is the root of your application.
  @override
  final List<String> list=[ 'x', 'y', 'y', 'x'];

  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
        title: Text('AppName',style: TextStyle(
            fontSize: 22.0,
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.w600,
            color: Colors.white
        ),

        ),leading: Icon(Icons.menu),  backgroundColor: Colors.redAccent,
        ),

        body: ListView.separated(
          separatorBuilder: (context, index)=> Divider(
            color: Colors.white,
          ),
          itemCount: eintraege.length,
          itemBuilder: (context, i){
        return new
        RowElement();
          },

    ),
    floatingActionButton: FloatingActionButton(
        onPressed: newEntry,
        child: Icon(Icons.add_circle_outline),
    )
    );

  }
}


class RowElementextends StatelessWidget {
  final leftSection = new Container();
  final middleSection = new Container();
  final rightSection = new Container();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(

          child: new Row(
            children: <Widget>[
              leftSection, middleSection, rightSection

            ],
          )
      ),
    );
  }
}
final leftSection = new Container(
  child: new CircleAvatar(
    //backgroundImage: new NetworkImage(url),
    backgroundColor: Colors.orangeAccent,
    radius: 24.0,
  ),
);

final middleSection = new Container(
  child: new Column(
    children: <Widget>[
      new Text("Name"),
      new Text("Hi whatsup?"),
    ],
  ),
);

final rightSection = new Container(

  child: new Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      new Text("9:50",
        style: new TextStyle(
            color: Colors.red,
            fontSize: 12.0),),
      new CircleAvatar(
        backgroundColor: Colors.orangeAccent,
        radius: 10.0,
        child: new Text("2",
          style: new TextStyle(color: Colors.white,
              fontSize: 12.0),),
      )
    ],
  ),
);

Answer 1

我不知道为什么要这么做，但是您不应该将小部件另存为类的字段，这不是一个好习惯。
这是一个可行的解决方案:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: ToDo()));

class ToDo extends StatelessWidget {
  // This widget is the root of your application.
  @override
  final List<String> list = ['x', 'y', 'y', 'x'];

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'AppName',
            style: TextStyle(
                fontSize: 22.0,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w600,
                color: Colors.white),
          ),
          leading: Icon(Icons.menu),
          backgroundColor: Colors.redAccent,
        ),
        body: ListView.separated(
          separatorBuilder: (context, index) => Divider(
            color: Colors.white,
          ),
          itemCount: 10,//put your item count
          itemBuilder: (context, i) {
            return new RowElement();
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},//implement onPressed
          child: Icon(Icons.add_circle_outline),
        ));
  }
}

class RowElement extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        //left element
        Expanded(
          child: Container(
            child: new CircleAvatar(
              //backgroundImage: new NetworkImage(url),
              backgroundColor: Colors.orangeAccent,
              radius: 24.0,
            ),
          ),
        ),
        //middle element
        Expanded(
          child: Container(
            child: new Column(
              children: <Widget>[
                new Text("Name"),
                new Text("Hi whatsup?"),
              ],
            ),
          ),
        ),
        //right element
        Expanded(
          child: Container(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                new Text(
                  "9:50",
                  style: new TextStyle(color: Colors.red, fontSize: 12.0),
                ),
                new CircleAvatar(
                  backgroundColor: Colors.orangeAccent,
                  radius: 10.0,
                  child: new Text(
                    "2",
                    style: new TextStyle(color: Colors.white, fontSize: 12.0),
                  ),
                )
              ],
            ),
          ),
        )
      ],
    );
  }
}