如何使用Flutter將列項目包裝在帶有標題的卡片中

Question

我是Flutter / Dart的新手，所以也許我的問題只是缺乏知識。 我的目標是構建一個在卡的頂部具有水平標題的卡，然后該卡應垂直顯示項目/值對的列表，如果設備足夠大，則將它們包裝到新列中。 我添加了一個列，用於兩個子項（標題和Wrap），但是如果將其嵌入到列中，則根本不會包裝。

我嘗試了很多組合，但沒有找到解決方案。 如果我刪除了該列，則“環繞”小部件將完美運行。

class TestApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return
      MaterialApp(
        title: 'Wrap Test',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: TestScreen(),
    );
  }
}

class TestScreen extends StatelessWidget {
  /*
  Builds a single item/value pair
  */
  Widget _text(int i) {
    var container = Container(
      height: 50,
      child: Row(
        children: <Widget>[
          Container(
            width: 200,
            child: Text(
              'item $i',
            ),
          ),
          Text(
            'value $i',
          ),
        ],
      ),
    );
    return container;
  }

  /*
  Builds a list of item/value pairs
   */
  List<Widget> _items(int n) {
    List<Widget> widgetList = [];

    for (int i = 1; i <= n; i++) {
      widgetList.add(_text(i));
    }

    return widgetList;
  }

  /*
  This way Wrap widget isn't working as I thought...the reason is that it seems bounded by
  the column and the column does not expands itself due to wrapping
   */
  Widget buildWrapNotWorking(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Header",
            ),
            Wrap(
              direction: Axis.vertical,
              runSpacing: 50,
              crossAxisAlignment: WrapCrossAlignment.start,
              spacing: 20,
              children: _items(20),
            ),
          ],
        ),
      ),
    );
  }


  /*
  This way Wrap widget is working, because I removed the column. But I need to have a card header
  on top of the card.
   */
  Widget buildWrapWorkingButNoHeader(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Wrap(
          direction: Axis.vertical,
          runSpacing: 100,
          crossAxisAlignment: WrapCrossAlignment.start,
          spacing: 20,
          children: _items(20),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return buildWrapNotWorking(context);
//    return buildWrapWorkingButNoHeader(context);
  }
}

我期望調用buildWrapNotWorking（context）將按需要工作。

問題類似於一個問題： 如何用顫動將行項目包裝在卡片中

Answer 1

只需將Wrap小部件Wrap為- Expanded -這將在列中獲得足夠的空間。

碼：

  Widget buildWrapNotWorking(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Test"),
      ),
      body: Card(
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "Header",
            ),
            Expanded(
              child: Wrap(
                direction: Axis.vertical,
                runSpacing: 50,
                crossAxisAlignment: WrapCrossAlignment.start,
                spacing: 20,
                children: _items(20),
              ),
            ),
          ],
        ),
      ),
    );
  }