Flutter：堆栈重叠小部件与第二个小部件

Question

图片链接

如何将子小部件推到堆栈边界之外。

我想在 AppBar 小部件上重叠搜索栏。

Stack 的溢出属性不能正常工作，而不是我们使用的。

我正在使用定位的小部件将子小部件移动到堆栈边界之外，但它保持不变我遇到了我需要解决此问题的问题。

这是我的代码

---

 PreferredSize _buildAppBar() {
return PreferredSize(
  preferredSize: const Size.fromHeight(100),
  child: AppBar(
    centerTitle: true,
    elevation: 0,
    backgroundColor: Colors.transparent,
    flexibleSpace: Stack(
      clipBehavior: Clip.none,
      fit: StackFit.loose,
      // alignment: AlignmentDirectional.bottomEnd,
      children: [
        Expanded(
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('images/gym.jpg'), fit: BoxFit.cover),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          // top: 90,
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 10),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                // ignore: prefer_const_constructors
                boxShadow: const [
                  BoxShadow(color: Colors.black12, blurRadius: 5)
                ]),
            child: TextFormField(
              // controller: controller,
              decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'Search Your Product',
                  hintStyle: TextStyle(color: Colors.grey[400]),
                  contentPadding:
                      const EdgeInsets.only(left: 22, right: 12),
                  fillColor: Colors.white,
                  filled: true,
                  suffixIcon: IconButton(
                      onPressed: () {},
                      icon: const Icon(
                        Icons.search,
                        size: 30,
                      ))),
              // obscureText: obscureText,
            ),
          ),
        ),
      ],
    ),
    title: const Text(
      'Home',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);

}

Answer 1

一种可能的方法是将 CustomScrollView 与 SliverAppBar 和 Stack 一起使用

这是解决方案之一的链接