Flutter实现Logo覆盖TextField上方布局的技术求助

你当前代码用Row做横向排列，无法实现Logo覆盖输入框的叠加效果，改用Stack组件就能解决这个问题。下面是调整后的完整代码：

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(21, 128, 197, 1),
        title: Container(
          height: 40, // 统一输入框高度，适配Logo大小
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(5.0),
          ),
          child: Stack(
            alignment: Alignment.centerLeft,
            children: [
              // 底层的输入框
              TextField(
                decoration: InputDecoration(
                  hintText: 'Search...',
                  border: InputBorder.none,
                  // 左边留出足够空间，避免文字被Logo挡住
                  contentPadding: const EdgeInsets.only(left: 55, right: 10, top: 10, bottom: 10),
                ),
              ),
              // 覆盖在输入框左上角的Logo
              Positioned(
                left: -15, // 让Logo部分超出输入框容器，贴合AppBar左侧
                child: CircleAvatar(
                  radius: 22,
                  backgroundColor: Colors.white,
                  child: ClipOval(
                    child: Image.asset(
                      "assets/images/logo_1.png",
                      height: 40,
                      width: 40,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键调整说明： #

• 用Stack替代Row：Stack允许子组件堆叠，实现Logo覆盖输入框的效果
• Positioned定位Logo：通过left: -15让Logo部分超出白色输入框容器，贴合AppBar左侧，达到参考图的覆盖效果
• 调整输入框内边距：contentPadding左边设为55，确保输入文本不会被Logo遮挡
• 统一容器高度：设置输入框容器高度为40，和Logo尺寸适配，布局更协调

内容的提问来源于stack exchange，提问作者GOPAL KRUSHNA SAHOO