Flutter基础（前端教程④-组件拼接）

基础1

class MainPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Column(  // 或者用 Row，取决于你想要垂直还是水平排列children: [Bg(),TopAppBar(),WelcomeBanner(),  // 第一个 widgetTabs(),   Frame63(),],),);}
}

基础2

class MainPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: SingleChildScrollView(  // 添加滚动支持child: Stack(children: [Bg(),  // 背景在最底层Column(children: [TopAppBar(),WelcomeBanner(),Tabs(),Frame63(),],),],),),);}
}

Stack 组件的作用是让多个组件按层叠顺序显示，类似 Photoshop 中的图层概念。

Stack 允许子组件相互叠加，通过 Positioned 或顺序控制层级关系。在你的代码中：

• 第一层：Bg() 作为背景，占据整个屏幕
• 第二层：Column() 包含的内容（如 TopAppBar、WelcomeBanner 等）显示在背景之上

基础3（增加间距）

class MainPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: SingleChildScrollView(  // 添加滚动支持child: Stack(children: [Bg(),  // 背景在最底层Column(children: [TopAppBar(),WelcomeBanner(),Tabs(),Frame63(),SizedBox(height: 55.0), // 此处的16.0表示间距大小，你可按需调整Headline(),SizedBox(height: 33.0),],),],),),);}
}

在 Flutter 中，double.infinity 是一个特殊的数值，表示无限大。它主要用于在布局中让组件尽可能地占据可用空间。不过，这个值的使用需要谨慎，因为它可能会导致布局错误。