跳到主要内容

第5章：布局与样式

在本章中，我们将学习如何使用Flutter的布局组件来构建用户界面。布局是Flutter应用开发中的核心概念之一，它决定了UI元素在屏幕上的排列方式。通过掌握常用的布局组件和样式设置，你将能够创建出美观且响应式的用户界面。

5.1 常用布局组件​

Flutter提供了多种布局组件，用于控制子组件的排列方式。以下是几种常用的布局组件：

5.1.1 Row 和 Column​

Row 和 Column 是Flutter中最基本的布局组件，分别用于水平排列和垂直排列子组件。

  • Row：将子组件水平排列。
  • Column：将子组件垂直排列。
Row(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
);

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
);

5.1.2 Stack​

Stack 允许子组件堆叠在一起，通常用于创建重叠的UI元素。

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
);

5.1.3 Flex 和 Expanded​

Flex 是一个灵活的布局组件，允许子组件在主轴方向上按比例分配空间。Expanded 是 Flex 的子组件，用于占据剩余空间。

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
);

5.2 样式与主题​

Flutter提供了丰富的样式设置选项，允许你自定义UI的外观。以下是两种常用的样式设置方式：

5.2.1 TextStyle​

TextStyle 用于设置文本的样式，包括字体、颜色、大小等。

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);

5.2.2 ThemeData​

ThemeData 用于定义应用的主题，包括颜色、字体、按钮样式等。通过设置主题，你可以统一应用的整体风格。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.orange,
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 16),
      headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    ),
  ),
  home: MyHomePage(),
);

5.3 响应式布局​

响应式布局是指UI能够根据屏幕尺寸和方向自动调整布局。Flutter提供了多种工具来实现响应式布局。

5.3.1 MediaQuery​

MediaQuery 用于获取屏幕的尺寸和方向信息，从而动态调整布局。

MediaQuery.of(context).size.width;
MediaQuery.of(context).size.height;
MediaQuery.of(context).orientation;

5.3.2 Expanded​

Expanded 组件可以用于在 Row 或 Column 中动态分配空间，从而实现响应式布局。

Row(
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
);

5.4 小结​

在本章中，我们学习了如何使用Flutter的布局组件来构建用户界面，并掌握了样式设置和响应式布局的基本概念。通过合理使用这些工具，你将能够创建出美观且适应不同屏幕尺寸的Flutter应用。

在下一章中，我们将深入探讨Flutter的状态管理，学习如何管理应用的状态以实现动态UI更新。