时间戳

首页 > 解决方案 > 如何使用 Flutter 将列项包装在带有标题的卡片中

flutter - 如何使用 Flutter 将列项包装在带有标题的卡片中

问题描述

我是 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) 将按需要工作。

问题与那个问题类似： How to wrap row items in a card with flutter

标签： flutterflutter-layout

解决方案

只需用 - 包裹你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),
              ),
            ),
          ],
        ),
      ),
    );
  }

推荐阅读