在构建时获取元素的高度以适应堆栈中的元素

Question

我想让我的 ListTile 的背景颜色像进度条一样。只有它的某些部分应该根据双精度值进行着色。

我使用以下代码：

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Container(
            width: 100.w,
            child: FractionallySizedBox(
              alignment: Alignment.centerLeft,
              widthFactor: getAnswerScore(index),
              child: Container(
                color: Colors.purpleAccent,
                child: Text(""),
              ),
            )),
        ListTile(
            contentPadding: EdgeInsets.all(0),
            title: Text("my Text",
              style: TextStyle(fontSize: 14.sp),
            ),
            leading: Radio(
              activeColor: Colors.purple,
              value: index,
              groupValue: answer,
              onChanged: (int value) {
                onClick(index);
              },
            )),
        getResultIcon(index)
      ],
    ),
    onTap: () {
      onClick(index);
    }
);

这导致了这个（系数 0.5）

宽度设置正确（紫色容器），但我需要将高度设置为 ListTile 的高度。问题是，listTile 的高度取决于 child 标题的长度。所以这是在构建时动态设置的。

解决此问题的正确方法是什么？

Answer 1

我认为用 positioned 包装你的外部 Container 并将 top 和 bottom 设置为 0 可以解决你的问题。

Answer 2

您可以使用 ConstrainedBox 设置紫色容器的最小高度。

ConstrainedBox(
  constraints: const BoxConstraints(
    minHeight: 70,
  ),
  child: Container(...),
),

Answer 3

您可以将 Positioned.fill 与 Container 一起使用来填充背景，并使用 FractionallySizedBox 来填充 Container 的颜色。

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Positioned.fill(
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
            widthFactor: sliderValue,
            child: Container(
              color: Colors.purpleAccent,
              child: Text(""),
            ),
          ),
        ),

要有部分进度条，请使用 Positioned 小部件并提供顶部和底部 0。

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Positioned(
          top: 0,
          bottom: 0,
          left: 0, // left and right is based on your max progress value
          right: 100,
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
                        widthFactor: sliderValue,

在构建时获取元素的高度以适应堆栈中的元素

get height of element on buildtime to adapt element in stack

flutter

flutter-layout