flutter : Text floating on the container margin or padding

Question

我正在尝试制作一个 ListView ，其中的项目由

里面一行4个展开的容器

每个容器里面都有一个中心部件和一个文本

关键是我想为每个项目做一个底边距

但当它需要更多空间时，文本会浮在上面

这是我的代码

首先是 ListView

  Widget _buildList(List list , BuildContext context) {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          String id = list[index]["default_code"].toString();
          String name = list[index]["name"].toString();
          String cate = list[index]["categ_id"][1].toString();
          String measure = list[index]["uom_id"][1].toString();
          return _buildTableRow(
              number: id,
              name: name,
              collection: cate,
              measure: measure,
              context: context);
        },
        itemCount: list == null ? 0:list.length,
        shrinkWrap: true,
      ),
    );
  }

和表格行

  Widget _buildTableRow(
      {@required String number,
      @required String name,
      @required String collection,
      @required String measure,
      @required BuildContext context}) {
    return Container(
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.white,
            ),
          ),
        ),
        child: Row(
          children: <Widget>[
            buildValueItem(number, context),
            buildValueItem(name, context),
            buildValueItem(collection, context),
            buildValueItem(measure, context)
          ],
        ));
  }

和 buildValueItem

Widget buildValueItem(String title, BuildContext context) {
  return Expanded(
    child: Container(
      height: 70,
      decoration: BoxDecoration(
        color: Color(0xFFCCCCCC),
        border: Border(
          left: BorderSide(
            color: Theme.of(context).primaryColorDark,
            width: 1,
          ),
        ),
      ),
      child: Center(
        child: Text(
          title,
          style: TextStyle(
            fontFamily: 'main',
            color: Colors.black,
          ),
          textAlign: TextAlign.center,
        ),
      ),
    ),
  );
}

像这样..

example

Answer 1

你可以做一些改变:

• 移除 Container 的固定高度 (70)
• 将 _buildTableRow 包裹在 IntrinsicHeight 中

像这样:

         return IntrinsicHeight(
                      child: _buildTableRow(
                      number: id,
                      name: name,
                      collection: cate,
                      measure: measure,
                      context: context),
                    );

...

Widget buildValueItem(String title, BuildContext context) {
            return Expanded(
              child: Container(
                decoration: BoxDecoration(
....