Flutter页面AppBar标题居中失效与滚动功能异常问题求助

问题1：AppBar标题居中 #

你当前把标题放在actions数组里，会导致标题靠右对齐，无法真正居中。正确做法是使用AppBar的title属性，并开启centerTitle：

appBar: AppBar(
  backgroundColor: Colors.white,
  centerTitle: true, // 开启标题居中
  title: Text(
    'WORKOUT PROGRAME',
    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
  ),
),

问题2：页面内容无法滚动 #

之前用ScrollView包裹Column无效，是因为外层的Align(alignment: Alignment.center)会强制Column居中，导致ScrollView无法正确识别内容高度。修改方案是移除Align，用SingleChildScrollView直接包裹Column，并设置Column的mainAxisSize为MainAxisSize.min（让Column仅占用内容所需高度）：

修改后的body部分代码：

body: Padding(
  padding: EdgeInsets.only(top: 60, left: 20, right: 20),
  child: SingleChildScrollView( // 替换Align为SingleChildScrollView
    child: Column(
      mainAxisSize: MainAxisSize.min, // 让Column仅占内容高度
      crossAxisAlignment: CrossAxisAlignment.center, // 保持内容水平居中
      children: [
        SizedBox(height: 10),
        Text(
          'Name of workout programe',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 10),
        Container(
          height: 250,
          width: 420,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            image: DecorationImage(
              image: AssetImage('assets/coverphoto.png'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        FilledButton(
          child: Text(
            'BUY FOR 0.00',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          onPressed: () {},
          style: ButtonStyle(
            backgroundColor: MaterialStatePropertyAll(Colors.black),
            foregroundColor: MaterialStatePropertyAll(Colors.white),
          ),
        ),
        SizedBox(height: 5),
        WorkoutPPostDetail(),
        WorkoutPPostDetail(),
        _pause(context)
      ],
    ),
  ),
),

完整修改后的代码 #

class WorkoutPage extends StatefulWidget {
  @override
  WorkoutPageState createState() => WorkoutPageState();
}

class WorkoutPageState extends State<WorkoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
          'WORKOUT PROGRAME',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 60, left: 20, right: 20),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 10),
              Text(
                'Name of workout programe',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              Container(
                height: 250,
                width: 420,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  image: DecorationImage(
                    image: AssetImage('assets/coverphoto.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              FilledButton(
                child: Text(
                  'BUY FOR 0.00',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                onPressed: () {},
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(Colors.black),
                  foregroundColor: MaterialStatePropertyAll(Colors.white),
                ),
              ),
              SizedBox(height: 5),
              WorkoutPPostDetail(),
              WorkoutPPostDetail(),
              _pause(context)
            ],
          ),
        ),
      ),
    );
  }
}

_pause(context) {
  return Padding(
    padding: const EdgeInsets.all(10.0),
    child: Container(
      height: 135,
      width: MediaQuery.of(context).size.width * 0.90,
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        color: Colors.white,
        shadows: [
          BoxShadow(
            color: Colors.grey.shade400,
            blurRadius: 5,
            spreadRadius: 2,
          ),
        ],
      ),
      child: Center(
        child: Text(
          'DAY NR| PAUSE',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 30,
            color: const Color.fromARGB(255, 207, 207, 207),
          ),
        ),
      ),
    ),
  );
}

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