找不到有关如何在自定义小部件中使用ListView的正确布局选项

Question

我试图提取重用一个简单的小部件，然后在父小部件中引用它。自定义小部件只是使用一行来布局一个文本字段和一个按钮，下面我想要一个显示项目的列表视图。然后，我将customwidget嵌入到parent中，但它会不断抛出错误。我还没有弄明白如何让自定义小部件在可以使用ListView或column layout的地方工作。下面是演示该问题的两个简化小部件。

这是父窗口小部件，我将其称为custom widget PlayControl（）

   @override
 Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
    title: Text('My Playlists'),
  ),
  body: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(20),
          child: Text('Test'),
        ),
        PlayListControl(),
      ],
    ),
  ),
  drawer: SideDrawer(),
);
 }
}

这是播放控制小部件。

  @override
 Widget build(BuildContext context) {
   return Container(
  margin: EdgeInsets.all(10),
    child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              child: TextField(),
            ),
            ButtonTheme(
                minWidth: 30,
                child: RaisedButton(
                  textColor: Colors.white,
                  child: Text('add'),
                  onPressed: () {},
                )),
          ],
        ),
      ),
      Expanded(
        child: ListView(
          children: <Widget>[
            Text('Widget 1'),
            Text('Widget 2'),
          ],
        ),
      )
    ],
  ),
);
}
}

无论我尝试什么，它总是抱怨与高度相关的布局问题。我本以为用扩展包装列表视图会解决这个问题，但事实并非如此。只有当我使用容器并指定高度时，我才不会出错，但我想使用任何可用的空间。

如何让PlayControl（）小部件在父控件中正确呈现？

Answer 1

您忘记在扩展的小部件中包装PlayControl的第一个容器。。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('My Playlists'),
          ),
          body: Container(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.start,
              textDirection: TextDirection.ltr,
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.all(20),
                  child: Text('Test'),
                ),
                PlayListControl(),
              ],
            ),
          ),
        ));
  }
}

class PlayListControl extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 200,
                    child: TextField(),
                  ),
                  ButtonTheme(
                      minWidth: 30,
                      child: RaisedButton(
                        textColor: Colors.white,
                        child: Text('add'),
                        onPressed: () {},
                      )),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: <Widget>[
                  Text('Widget 1'),
                  Text('Widget 2'),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}