如何在 Flutter 中创建手机/平板电脑布局（MediaQuery 和 LayoutBuilders）教程

2023-11-23 0 798

正文：

使用 Flutter，我们可以使用 MediaQuery 和 LayoutBuilders 来创建适用于手机和平板电脑的布局。这些工具可以帮助我们根据设备的屏幕尺寸和方向来调整布局。通过使用 MediaQuery，我们可以获取设备的屏幕尺寸和方向信息，并根据这些信息来调整布局的大小和位置。而 LayoutBuilders 则可以帮助我们根据不同的约束条件来构建不同的布局。这些工具的结合使用，可以让我们的应用在不同的设备上都能够呈现出最佳的布局效果。

首先，我们需要创建一个函数来返回两个 GridView。

// https://www.huizhanii.com
gridviewForPhone() {
   return Padding(
     padding: EdgeInsets.all(5.0),
     child: GridView.count(
       crossAxisCount: 2,
       childAspectRatio: 1.0,
       mainAxisSpacing: 4.0,
       crossAxisSpacing: 4.0,
       children: List.generate(100, (index) {
         return Card(
           child: Container(
             alignment: Alignment.center,
             color: Colors.red[100 * (index % 9)],
             child: Text('$index'),
           ),
         );
       }),
     ),
   );
 }
 
 gridviewForTablet() {
   return Padding(
     padding: EdgeInsets.all(5.0),
     child: GridView.count(
       crossAxisCount: 4,
       childAspectRatio: 1.0,
       mainAxisSpacing: 4.0,
       crossAxisSpacing: 4.0,
       children: List.generate(100, (index) {
         return Card(
           child: Container(
             alignment: Alignment.center,
             color: Colors.green[100 * (index % 9)],
             child: Text('$index'),
           ),
         );
       }),
     ),
   );
 }

在这个函数中，Phone GridView 将每行显示 2 个单元格，而平板电脑将每行显示 4 个。

使用 MediaQuery

为了确定布局，我们将使用 MediaQuery。为此，我们将声明三个变量。
我们假设 600.0 作为平板电脑的边界。

// https://www.huizhanii.com
final double shortestSide = MediaQuery.of(context).size.shortestSide; // get the shortest side of device
final bool useMobileLayout = shortestSide < 600.0; // check for tablet
final Orientation orientation = MediaQuery.of(context).orientation; // get the orientation

现在我们的构建方法将更改为

// https://www.huizhanii.com
@override
Widget build(BuildContext context) {
   
  final double shortestSide = MediaQuery.of(context).size.shortestSide; // get the shortest side of device
  final bool useMobileLayout = shortestSide < 600.0; // check for tablet
  final Orientation orientation = MediaQuery.of(context).orientation; // get the orientation
 
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: useMobileLayout
        ? gridviewForPhone(orientation)
        : gridviewForTablet(orientation),
    ...

现在我们将方法更改为

// https://www.huizhanii.com
gridviewForPhone(Orientation orientation) {
  ...
  GridView.count(
    crossAxisCount: orientation.portrait ? 2 : 4
  ...
}
 
gridviewForTablet(Orientation orientation) {
...
 GridView.count(
   crossAxisCount: orientation.portrait ? 4 : 6
}

使用 LayoutBuilder

这是进行比较的示例

// https://www.huizhanii.com
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
      if (constraints.maxWidth < 600.0) {
          return gridviewForPhone();
      } else {
          return gridviewForTablet();
      }
},

为了简单起见，我们只是使用构建器约束检查设备的最大宽度。
因此，一旦您的设备超过 600.0 的最大宽度，可能在横向模式下它最终会显示平板电脑的 GridView。

赏

微信扫一扫