Question

试图将其组成的列表项

其中一行4个展开的容器

每个容器中都有一个中心小部件，其中有一个文本

重点是我想为每个项目赚一个底线

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

这是我的代码

首先是列表视图

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

和TableRow

  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(
....

颤动：文本在容器边缘浮动或填充

1 个答案: