Question

我试图提取重复使用的简单小部件，然后在父小部件中引用该小部件。自定义窗口小部件仅使用一行来布局textField和一个按钮，在此之下我想要一个显示项目的列表视图。然后，我将parent嵌入到customwidget中，但它不断抛出错误。我还没有弄清楚如何使自定义窗口小部件在我可以使用ListView或内部列布局的地方工作。以下是2个演示该问题的简化小部件。

这是父窗口小部件，在这里我将其称为自定义窗口小部件PlayListControl（）

   @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(),
);
 }
}

这是playlistcontrol小部件。

  @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'),
          ],
        ),
      )
    ],
  ),
);
}
}

无论我尝试什么，它总是抱怨与高度有关的布局问题。我本以为将ListView包裹在Expanded中可以解决此问题，但事实并非如此。仅当我使用容器并指定高度时，我才不会收到错误，但我想使用存在的任何可用空间。

如何获取此playlistcontrol（）小部件以在父控件中正确呈现？

Answer 1

您忘记将PlayListControl的第一个容器包装在“扩展”小部件中。

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'),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

1 个答案: