如何减少Flutter应用首页列表元素的间距？

问题原因 #

你界面出现大间距的核心原因是给引导文字的PageView和下方的轮播指示器各套了一层Expanded，两个Expanded会均分Column中剩余的垂直空间，导致两个模块之间被撑开了大量无用空白。

解决方法 #

按以下步骤修改即可：

1. 去掉包裹轮播指示器的外层Expanded，指示器本身只需要很小的高度，不需要占用剩余空间
2. 可以给intro组件的Column增加mainAxisSize: MainAxisSize.min属性，让文字容器只包裹内容，不占用多余高度
3. 可自行在模块之间增加指定高度的SizedBox灵活调整间距大小

修改后的代码示例 #

1. Firstpage页面build方法修改

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(height: 80),
          Container(
            width: 340,
            height: 250,
            child: Image.asset('assets/images/trip.png', fit: BoxFit.fill),
          ),
          Center(
            child: Text("App", style: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.w500,
              color: Color(0xFF9a0e2a)
            ),),
          ),
          SizedBox(height: 10),
          // 仅保留PageView的Expanded，占满剩余可用空间
          Expanded(
            child: PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  currentPage = value;
                });
              },
              itemCount: splashData.length,
              itemBuilder: (context, index) => intro(
                text: splashData[index]['text'],
              ),
            ),
          ),
          // 去掉原来的Expanded，直接放指示器，10的高度可以自己调整
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(
              splashData.length,
              (index) => buildDot(index: index),
            ),
          ),
          // 调整指示器和下方按钮的间距，数值可自定义
          SizedBox(height: 30),
          DefaultButton(
            text: "Sign Up",
            press: () {
              Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
            },
          ),
          SizedBox(height: 20),
          DefaultButton(
            text: "Login",
            press: () {
              Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
            },
          ),
        ],
      )
    )
  );
}

2. intro类修改

class intro extends StatelessWidget {
  const intro({
    Key? key,
    this.text,
    this.image,
  }) : super(key: key);
  final String? text, image;

  @override
  Widget build(BuildContext context) {
    return Column(
      // 新增这行，让Column仅包裹内容，不占多余高度
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(
          text!,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

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