关于灵活的 Flutter 布局问题

Question

我正在开发一个 Flutter 应用程序，但是当我运行该应用程序时它显示错误。 我不明白有什么问题。我想我混淆了小部件如何在布局中扩展的逻辑。 请帮忙解决这个问题。

错误信息：

• flutter：在 performResize() 期间抛出了以下断言：
• flutter：垂直视口的高度没有限制。
• 视口在滚动方向上展开以填充其容器。在这种情况下，垂直
• 视口被赋予了无限量的垂直空间来扩展。这种情况
• 通常在一个可滚动小部件嵌套在另一个可滚动小部件中时发生。

这里有我的代码：

    body: Container(
          child: Flexible(
            child: FirebaseAnimatedList(
              query: databaseReference,
              itemBuilder: (_, DataSnapshot snapshot,
                  Animation<double> animation,
                  int index) {
                return new Card(
                  color: Colors.black38,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        leading: IconButton(
                          icon: Icon(Icons.format_list_bulleted),
                          color: Colors.blueAccent,
                          splashColor: Colors.greenAccent,
                          onPressed: () {
                            // Perform some action
                            debugPrint('button ok');
                          },
                        ),
                        title: Text(shopList[index].shopName),
                        subtitle: Text(shopList[index].address),
                      ),

                      Container(
                        child: Flexible(
                          child: Form(
                            key: formShopKey,
                            child: ListView(
                              children: <Widget>[
                                ListTile(
                                  leading: Icon(
                                    Icons.money_off,
                                    color: Colors.white,
                                  ),
                                  title: TextFormField(
                                    maxLength: 100,
                                    initialValue: "",
                                    maxLines: 3,
                                    //onSaved: (val) => booking.seafoodRequest = val,
                                    //validator: (val) => val == "" ? val : null,
                                    decoration: new InputDecoration(

                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

                      ButtonTheme.bar(
                        // make buttons use the appropriate styles for cards
                        child: new ButtonBar(
                          children: <Widget>[
                            new FlatButton(
                              child: const Text('BUY TICKETS'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                            new FlatButton(
                              child: const Text('LISTEN'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        );


  [1]: https://i.stack.imgur.com/5vAsv.png
  [2]: https://i.stack.imgur.com/LuZEl.png

Answer 1

我必须填补一些空白，但以下内容应该适合您。我还用普通的AnimatedList 交换了FirebaseAnimatedList 来构建它。您可以比较和调整布局。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: AnimatedList(
              initialItemCount: 10,
              itemBuilder: (BuildContext context, int index,
                  Animation<double> animation) {
                return new Card(
                  color: Colors.black38,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ListTile(
                        leading: IconButton(
                          icon: Icon(Icons.format_list_bulleted),
                          color: Colors.blueAccent,
                          splashColor: Colors.greenAccent,
                          onPressed: () {
                            // Perform some action
                            debugPrint('button ok');
                          },
                        ),
                        title: Text('Name'),
                        subtitle: Text('Address'),
                      ),
                      Container(
                        constraints: BoxConstraints(
                          minHeight: 100.0,
                          maxHeight: 200.0,
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Expanded(
                              child: Form(
                                child: ListView(
                                  children: <Widget>[
                                    ListTile(
                                      leading: Icon(
                                        Icons.money_off,
                                        color: Colors.white,
                                      ),
                                      title: TextFormField(
                                        maxLength: 100,
                                        initialValue: "",
                                        maxLines: 3,
                                        //onSaved: (val) => booking.seafoodRequest = val,
                                        //validator: (val) => val == "" ? val : null,
                                        decoration: new InputDecoration(),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      ButtonTheme.bar(
                        // make buttons use the appropriate styles for cards
                        child: new ButtonBar(
                          children: <Widget>[
                            new FlatButton(
                              child: const Text('BUY TICKETS'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                            new FlatButton(
                              child: const Text('LISTEN'),
                              onPressed: () {
                                /* ... */
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}