Flutter 布局技巧详解

Flutter 布局技巧详解一、布局概述Flutter 布局是构建 UI 的基础。掌握布局技巧可以创建高效、美观的界面。1.1 布局原则组合优于继承- 使用多个 Widget 组合约束传递- 父 Widget 向子 Widget 传递约束性能优化- 避免不必要的嵌套二、常用布局 Widget2.1 ContainerContainer( width: 200, height: 100, padding: const EdgeInsets.all(16), margin: const EdgeInsets.symmetric(vertical: 8), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(8), boxShadow: const [BoxShadow(offset: Offset(0, 2), blurRadius: 4)], ), child: const Text(Container), )2.2 Row 和 ColumnRow( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: const [ Text(Left), Text(Center), Text(Right), ], ) Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ Text(Top), SizedBox(height: 16), Text(Bottom), ], )2.3 Expanded 和 FlexibleRow( children: [ Expanded( flex: 2, child: Container(color: Colors.blue), ), Expanded( flex: 1, child: Container(color: Colors.red), ), ], )2.4 StackStack( alignment: Alignment.center, children: [ Container(width: 200, height: 200, color: Colors.blue), const Positioned( top: 10, right: 10, child: Text(Overlay), ), ], )三、布局技巧3.1 响应式布局LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth 600) { return const DesktopLayout(); } else { return const MobileLayout(); } }, )3.2 SafeAreaSafeArea( child: Scaffold( body: const Center(child: Text(Content)), ), )3.3 SingleChildScrollViewSingleChildScrollView( child: Column( children: [ // 内容 ], ), )四、性能优化4.1 使用 const Widgetconst Text(Hello); const SizedBox(height: 16);4.2 避免过度嵌套// 不好 Container( child: Column( children: [ Container( child: Text(Hello), ), ], ), ) // 好 const Text(Hello)五、实战案例5.1 卡片布局Card( elevation: 2, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), child: Padding( padding: const EdgeInsets.all(16), child: Row( children: [ const CircleAvatar(radius: 20), const SizedBox(width: 12), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text(Title), Text(Subtitle), ], ), ), const Icon(Icons.arrow_forward), ], ), ), )5.2 响应式网格GridView.builder( gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200, crossAxisSpacing: 16, mainAxisSpacing: 16, ), itemCount: 12, itemBuilder: (context, index) { return Container( color: Colors.blue[100], child: Center(child: Text(Item $index)), ); }, )六、总结布局技巧常用 Widget- Container、Row、Column、Stack响应式- LayoutBuilder、MediaQuery性能优化- const、避免嵌套特殊布局- SafeArea、SingleChildScrollView合理使用可以创建高效美观的界面。