Flutter编辑资料页布局问题：文本居左&添加滚动视图

问题1：文本居左未生效修复 #

导致该问题的原因是包含「Name」「Username」的Column未占满可用宽度，即使设置了crossAxisAlignment: CrossAxisAlignment.start，也只会在自身内容宽度范围内左对齐，视觉上仍呈现居中效果。只需给该Column外层添加Container并设置width: double.infinity，让其占满横向空间即可生效。

问题2：标题居中+内容滚动实现 #

使用Scaffold的appBar属性实现标题居中与返回按钮分离的布局，同时将标题下方的所有内容包裹在SingleChildScrollView中，解决内容过长时的溢出问题并实现滚动效果。

修改后的完整代码 #

import 'package:flutter/material.dart';

class EditProfileBPage extends StatefulWidget {
  @override
  EditProfileBState createState() => EditProfileBState();
}

class EditProfileBState extends State<EditProfileBPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      // 实现标题居中+独立返回按钮
      appBar: AppBar(
        leading: BackButton(),
        title: Text('Edit profile', style: TextStyle(fontWeight: FontWeight.bold)),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      // 内容包裹在SingleChildScrollView实现滚动
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(top: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 30),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  'Keep your personal details private.Information you add here is visible to anyone who can view your profile.',
                  style: TextStyle(color: Colors.grey, fontSize: 15),
                ),
              ),
              SizedBox(height: 10),
              CircleAvatar(
                radius: 60,
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 46,
                  backgroundColor: Colors.grey.shade100,
                  child: Text('Pic'),
                ),
              ),
              FilledButton(
                child: Text(
                  'EDIT AVATAR',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => EditProfileBPage()),
                  );
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(Colors.black),
                  foregroundColor: MaterialStatePropertyAll(Colors.white),
                ),
              ),
              SizedBox(height: 10),
              Padding(
                padding: const EdgeInsets.all(13.0),
                child: Image.asset('assets/coverphoto.png'),
              ),
              FilledButton(
                child: Text(
                  'EDIT COVER PHOTO',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => EditProfileBPage()),
                  );
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(Colors.black),
                  foregroundColor: MaterialStatePropertyAll(Colors.white),
                ),
              ),
              SizedBox(height: 10),
              // 修复文本居左问题：Container占满横向宽度
              Padding(
                padding: EdgeInsets.all(10),
                child: Container(
                  width: double.infinity,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Name', style: TextStyle(fontSize: 15)),
                      SizedBox(height: 10),
                      Text(
                        'Name Influencer',
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                      ),
                      SizedBox(height: 10),
                      Text('Username', style: TextStyle(fontSize: 15)),
                      SizedBox(height: 10),
                      Text(
                        'Username Influencer',
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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