Flutter 布局技巧详解
一、布局概述
Flutter 布局是构建 UI 的基础。掌握布局技巧可以创建高效、美观的界面。
1.1 布局原则
- 组合优于继承- 使用多个 Widget 组合
- 约束传递- 父 Widget 向子 Widget 传递约束
- 性能优化- 避免不必要的嵌套
二、常用布局 Widget
2.1 Container
Container( 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 和 Column
Row( 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 和 Flexible
Row( children: [ Expanded( flex: 2, child: Container(color: Colors.blue), ), Expanded( flex: 1, child: Container(color: Colors.red), ), ], )2.4 Stack
Stack( 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 SafeArea
SafeArea( child: Scaffold( body: const Center(child: Text('Content')), ), )3.3 SingleChildScrollView
SingleChildScrollView( child: Column( children: [ // 内容 ], ), )四、性能优化
4.1 使用 const Widget
const 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
合理使用可以创建高效美观的界面。
