布局与 UI 组件

Flutter 的布局系统非常灵活，通过组合不同的 Widget 来构建复杂的 UI。掌握核心布局组件和设计原则是开发高效、美观应用的关键。

---

核心组件

3.1 基础布局

• Row：水平排列子组件。

  Row(
    children: [
      Text('Left'),
      Spacer(), // 占据剩余空间
      Text('Right'),
    ],
  );
  

• Column：垂直排列子组件。

  Column(
    children: [
      Text('Top'),
      Expanded(child: Container(color: Colors.red)), // 占据剩余空间
      Text('Bottom'),
    ],
  );
  

• Stack：将子组件叠加在一起。

  Stack(
    children: [
      Container(color: Colors.blue),
      Positioned(
        top: 10,
        left: 10,
        child: Text('Overlay'),
      ),
    ],
  );
  

• Flex：灵活布局，Row 和 Column 的底层实现。

  Flex(
    direction: Axis.horizontal, // 水平排列
    children: [
      Expanded(flex: 1, child: Container(color: Colors.red)),
      Expanded(flex: 2, child: Container(color: Colors.blue)),
    ],
  );
  

---

3.2 滚动布局

• ListView：垂直滚动的列表。

  ListView(
    children: [
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
    ],
  );
  
  // 动态列表
  ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  );
  

• GridView：网格布局。

  GridView.count(
    crossAxisCount: 2, // 每行显示2个
    children: List.generate(10, (index) => Container(color: Colors.blue)),
  );
  
  // 动态网格
  GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemCount: 10,
    itemBuilder: (context, index) => Container(color: Colors.blue),
  );
  

• CustomScrollView：自定义滚动布局，结合 Slivers 使用。

  CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text('Sliver AppBar'),
        expandedHeight: 200,
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) => ListTile(title: Text('Item $index')),
          childCount: 20,
        ),
      ),
    ],
  );
  

---

3.3 容器类

• Container：多功能容器，可以设置尺寸、边距、背景色等。

  Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    margin: EdgeInsets.all(10),
    child: Text('Hello'),
  );
  

• Padding：设置内边距。

  Padding(
    padding: EdgeInsets.all(10),
    child: Text('Padded Text'),
  );
  

• Expanded：在 Row 或 Column 中占据剩余空间。

  Row(
    children: [
      Expanded(
        flex: 2, // 占据2份空间
        child: Container(color: Colors.red),
      ),
      Expanded(
        flex: 1, // 占据1份空间
        child: Container(color: Colors.green),
      ),
    ],
  );
  

• SizedBox：设置固定尺寸或占位。

  SizedBox(
    width: 100,
    height: 100,
    child: Text('Fixed Size'),
  );
  

---

必须掌握

3.4 响应式设计

• MediaQuery：获取屏幕尺寸和设备信息。

  double screenWidth = MediaQuery.of(context).size.width;
  double screenHeight = MediaQuery.of(context).size.height;
  

• LayoutBuilder：根据父组件尺寸动态调整布局。

  LayoutBuilder(
    builder: (context, constraints) {
        
        
      if (constraints.maxWidth > 600) {
        
        
        return WideLayout();
      } else {
        
        
        return NarrowLayout();
      }
    },
  );
  

---

3.5 自适应布局

• 处理不同屏幕尺寸：

  • 使用 MediaQuery 和 LayoutBuilder 动态调整布局。
  • 使用 Flexible 和 Expanded 实现弹性布局。
  • 使用 AspectRatio 保持宽高比。

    AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(color: Colors.blue),
    );
    

• 示例：响应式布局

  class ResponsiveLayout extends StatelessWidget {
        
        
    @override
    Widget build(BuildContext context) {
        
        
      return Scaffold(
        body: Center(
          child: LayoutBuilder(
            builder: (context, constraints) {
        
        
              if (constraints.maxWidth > 600) {
        
        
                return WideLayout();
              } else {
        
        
                return NarrowLayout();
              }
            },
          ),
        ),
      );
    }
  }
  

---

总结

• 基础布局：掌握 Row、Column、Stack、Flex。
• 滚动布局：掌握 ListView、GridView、CustomScrollView。
• 容器类：掌握 Container、Padding、Expanded、SizedBox。
• 响应式设计：使用 MediaQuery 和 LayoutBuilder 实现动态布局。
• 自适应布局：处理不同屏幕尺寸，确保 UI 在各种设备上表现一致。

掌握这些布局与 UI 组件的使用技巧后，你可以轻松构建复杂且美观的 Flutter 应用界面。

---

结束语
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！