点击 ListView Flutter 布局中的整行

Question

所以我有一个 ListView 设置屏幕，我希望用户能够点击整个列表行来更改该设置。但是，我似乎找不到 non-insane 方法来扩展 GestureDetector 的 child 以填满整个水平 space。

我的列表视图：

ListView(
    children: [
      GestureDetector(
        onTap: () {
          print('tapped the row');
        },
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Totals expressed in', style: TextStyle(fontSize: 16.0)),
              Text('Percentages', style: TextStyle(color: Colors.black54, fontSize: 15.0)),
            ],
          ),
        ),
      ),
      Divider(height: 1.0),
      // followed by other elements in the list view

这将检测点击，但仅 space 文本元素水平占据（屏幕宽度的一小部分）。我知道 Expanded 小部件，但无论我尝试将其放置在何处，都会收到一个错误消息，提示它必须是 Row 或 Column 的后代或异常：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Answer 1

在您的代码中将 - crossAxisAlignment: CrossAxisAlignment.start 更改为：

Column(
      crossAxisAlignment: CrossAxisAlignment.stretch

这将使 Column children 占据所有水平 Space。

Answer 2

我一直在使用具有透明背景色的 Container 来解决这个问题。

Answer 3

试试 InkWell。 InkWell 允许可点击的 space 拉伸整行。

点击 ListView Flutter 布局中的整行

Tap on entire row in ListView Flutter layout

dart

flutter

flutter-layout