Question

为什么 Positioned 红色小部件是透明的，以便可以透过它看到 Second Label Text 小部件？

设置：列：

堆栈
- 文本字段
- 定位
  - 红色容器
TextField（第二个标签文本）

目的是红色小部件以不透明的方式覆盖其下方的文本字段。

谢谢

@override
  Widget build(BuildContext context) {
    const pad = 16.0;
    const vertPadding = 10.0;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: [
        Stack(clipBehavior: Clip.none, children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
            child: TextField(
              autocorrect: false,
              maxLines: null,
              decoration: InputDecoration(
                border: _border,
                labelText: "Label text",
                labelStyle: TextStyle(color: Colors.grey),
              ),
            ),
          ),
          Positioned(
            top: pad,
            left: pad,
            width: 200.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              width: 200,
              height: 84,
              child: Padding(
                padding:
                    const EdgeInsets.fromLTRB(16, vertPadding, 0, vertPadding),
                child: Container(),
              ),
            ),
          ),
        ]),
        Padding(
          padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
          child: TextField(
            decoration: InputDecoration(
              border: _border,
              labelText: "Second Label text",
            ),
          ),
        )
      ]),
    );
  }

  final OutlineInputBorder _border = OutlineInputBorder(
    borderRadius: BorderRadius.circular(4.0),
    borderSide: BorderSide(
      color: Colors.grey,
      width: 1.0,
    ),
  );

Answer 1

你有没有想过为什么第一个文本框在红框后面，第二个文本框在红框上方？是因为它们在堆栈的小部件列表中的索引。

您的小部件树是错误的。父小部件应该是堆栈，它的第一个孩子应该是两个文本字段的列，第二个孩子将是您想要的红色框。试试下面的代码，然后在评论中告诉我。

@override
Widget build(BuildContext context) {
const pad = 16.0;
const vertPadding = 10.0;

return Scaffold(
  appBar: AppBar(
    title: Text(""),
  ),
  body: Stack(clipBehavior: Clip.none, children: [
    Column(
      children: [
        Padding(
          padding:
              const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
          child: TextField(
            autocorrect: false,
            maxLines: null,
            decoration: InputDecoration(
              border: _border,
              labelText: "Label text",
              labelStyle: TextStyle(color: Colors.grey),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
          child: TextField(
            decoration: InputDecoration(
              border: _border,
              labelText: "Second Label text",
            ),
          ),
        )
      ],
    ),
    Positioned(
      top: pad,
      left: pad,
      width: 200.0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        width: 200,
        height: 84,
        child: Padding(
          padding:
              const EdgeInsets.fromLTRB(16, vertPadding, 0, vertPadding),
          child: Container(),
        ),
      ),
    ),
  ]),
);
}

Flutter：为什么定位小部件在 TextField 上是透明的？

1 个答案: