ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Flutter基础(前端教程④-组件拼接)

2026/10/2 15:05:31 拓冰建站 浏览量
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 是一个特殊的数值,表示无限大。它主要用于在布局中让组件尽可能地占据可用空间。不过,这个值的使用需要谨慎,因为它可能会导致布局错误。