当前位置：首页 > news >正文

Flutter 布局技巧详解

news 2026/5/30 23:35:57

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')), ); }, )