删除列颤动中行之间的空间

Question

我正在开发一个项目，需要最小化列内每行之间的垂直空间。我的目标是使布局尽可能紧凑，特别是通过减少价格和名称字段下方的空间。然而，我一直在努力实现这一目标。

Widget articleInfo(String articleName, String price, int quantity, int index) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      color: Color.fromARGB(59, 196, 191, 191)),
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
    child: Column(
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Text(
                  articleName,
                  style: const TextStyle(fontSize: 16, color: Color(0xff181e40)),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Text("Price"),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 25),
                child: TextField(
                  controller: priceEditingControllers[index],
                  decoration: InputDecoration(
                    hintText: price,
                    labelStyle: TextStyle(color: Color(0xff181e40)),
                    hintStyle: TextStyle(color: Color(0xff181e40)),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xff181e40), width: 1.0),
                    ),
                    contentPadding: EdgeInsets.only(bottom: -30),
                  ),
                  style: TextStyle(color: Color(0xff181e40)),
                  textAlign: TextAlign.center,
                  keyboardType: TextInputType.number,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 4,
              child: Row(
                children: [
                  IconButton(
                    padding: EdgeInsets.all(0),
                    icon: Icon(Icons.remove_circle, color: Color(0xff181e40), size: 20),
                    onPressed: () {},
                  ),
                  Text(
                    quantities[index].toString(),
                    style: TextStyle(color: Color(0xff181e40)),
                  ),
                  IconButton(
                    padding: EdgeInsets.all(0),
                    icon: Icon(Icons.add_circle, color: Color(0xff181e40), size: 20),
                    onPressed: () {},
                  ),
                  Expanded(
                    child: Align(
                      child: IconButton(
                        padding: EdgeInsets.zero,
                        alignment: Alignment.centerLeft,
                        icon: Icon(Icons.mode_edit_outline, size: 20),
                        onPressed: () {},
                        
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

我尝试高度容器，列中的 mainAxisSize 和行中的 mainAxisSize

Answer 1

行之间没有空格，您可以通过用

Container

包裹每一行并给它一些颜色来验证它。空间来自

TextField

和

IconButton

。

要删除

TextField

中的多余空格，请在其

isDense: true

中设置

InputDecoration

。

TextField(
  decoration: InputDecoration(
    isDense: true,
    // ...
  ),
  // ...
)

要减少

IconButton

周围的空间，您可以设置

visualDensity: VisualDensity.compact

。

IconButton(
  visualDensity: VisualDensity.compact,
  // ...
)

如果想进一步减少，可以在其

tapTargetSize: MaterialTapTargetSize.shrinkWrap

中设置

ButtonStyle

：

IconButton(
  style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
  // ...
)

请注意，通常不鼓励删除按钮周围的空格，因为它违背了材料指南的目的，即鼓励按钮周围留有空格以获得更好的用户体验。