Flutter：如何将按钮定位在组件边缘居中位置？代码求助

嘿，我明白你想把POST按钮放在那个带阴影的白色容器底部边缘居中的位置对吧？原代码里按钮只是跟着Column排在容器下面，没法实现“边缘居中”的效果，咱们用Stack + Positioned就能轻松搞定，这是最适合这种叠加布局需求的方案。

修改后的完整代码 #

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flutter/material.dart';
import 'UserProfiles.dart';
import 'viewProfiles.dart';

class CustomerPosts extends StatefulWidget {
  @override
  CustomerPostsState createState() => CustomerPostsState();
}

class CustomerPostsState extends State<CustomerPosts> {
  TextEditingController textEditingController = TextEditingController();
  final database = Firestore.instance;
  String searchString;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(child: Column(children: <Widget>[TopText()])));
  }
}

class TopText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 60, left: 20, right: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                "Hey there,\n customers are needing you👀 ",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Helvetica',
                    fontSize: 24),
              ),
              SizedBox(height: 15),
              Padding(
                padding: const EdgeInsets.only(left: 10, right: 10),
                // 用Stack包裹容器和按钮，实现叠加布局
                child: Stack(
                  alignment: Alignment.bottomCenter,
                  children: [
                    Container(
                      width: 360,
                      height: 200,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(60),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 5,
                            blurRadius: 7,
                            offset: Offset(0, 3),
                          )
                        ],
                      ),
                    ),
                    // Positioned将按钮定位在容器底部中心，调整top值让按钮刚好贴在边缘
                    Positioned(
                      top: 175, // 容器高度200，按钮高度约25，200-25=175，刚好贴在底部
                      child: RaisedButton(
                          onPressed: () {},
                          child: Text(
                            "POST",
                            style: TextStyle(
                                color: Colors.white, fontWeight: FontWeight.bold),
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(18.0),
                          ),
                          color: Colors.blueAccent),
                    )
                  ],
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

关键修改点说明 #

• 把原来单独的Container和按钮用Stack组件包裹，让按钮可以叠加在容器之上，这是实现“边缘贴合”的核心
• 给Stack设置alignment: Alignment.bottomCenter，确保按钮默认处于底部中心的位置
• 用Positioned组件精确调整按钮位置：通过top属性让按钮刚好贴在容器底部边缘（这里容器高度200，按钮高度约25，所以设置top为175，你可以根据实际按钮大小微调这个数值）
• 去掉了原来包裹按钮的多余Container和Padding，简化了布局结构

这样修改后，POST按钮就会完美卡在那个白色容器的底部边缘居中位置啦！

内容的提问来源于stack exchange，提问作者megatronn2