Flutter布局插件flexible的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter布局插件flexible的使用

解决问题

视觉设计师在开发移动应用时通常只输出一个屏幕的设计稿，我们希望能够完美地适应不同分辨率的设备。

实现方案

该方案通过调整屏幕宽度来实现。最合适的UI可以滚动。

如何使用

导入
import 'package:flexible/flexible.dart';
示例
ScreenFlexibleWidget(  // 1. 将组件包裹在 `ScreenFlexibleWidget` 中
  child: Builder(
    builder: (BuildContext context) {
      return Container(
        color: Colors.red,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: flexible(context, 187.5),  // 2. 所有像素值使用 `flexible` 函数，375.0/2=187.5，
                                                // 这个容器在任何设备上都是屏幕宽度的一半。
              height: flexible(context, 500.0),
              color: Colors.yellow,
              child: Center(
                child: Text(
                  'A',
                  style: TextStyle(
                    fontSize: flexible(context, 200.0), // 文本字体大小也使用 `flexible`
                    color: Colors.black,
                    decoration: TextDecoration.none,
                  ),
                ),
              ),
            )
          ],
        ),
      );
    },
  ),
);

更多关于Flutter布局插件flexible的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter布局插件flexible的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用flexible布局的示例代码。flexible 实际上是 Flexible 组件的简写，它通常与 Column 中的 Row 或 Row 中的 Column 一起使用，用于在主轴方向（对于 Row 是水平方向，对于 Column 是垂直方向）上提供灵活的子项空间分配。

在Flutter中，Flexible 组件允许其子项在主轴方向上占用剩余空间，并根据 flex 属性（一个整数，默认为1）的比例来分配空间。

以下是一个简单的示例，展示了如何在 Row 中使用 Flexible 组件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flexible Widget Example'),
        ),
        body: Center(
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 1, // 第一个Flexible占1份空间
                child: Container(
                  color: Colors.red,
                  height: 100,
                  child: Center(child: Text('Flexible 1', style: TextStyle(color: Colors.white))),
                ),
              ),
              Flexible(
                flex: 2, // 第二个Flexible占2份空间
                child: Container(
                  color: Colors.green,
                  height: 100,
                  child: Center(child: Text('Flexible 2', style: TextStyle(color: Colors.white))),
                ),
              ),
              Flexible(
                flex: 1, // 第三个Flexible占1份空间
                child: Container(
                  color: Colors.blue,
                  height: 100,
                  child: Center(child: Text('Flexible 3', style: TextStyle(color: Colors.white))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含三个 Flexible 子项的 Row。每个 Flexible 子项都包含一个 Container，并且我们为每个 Flexible 设置了不同的 flex 值（1、2、1）。这意味着第二个 Flexible 将占用两倍于第一个和第三个 Flexible 的空间。

这个布局将按照 flex 值的比例在水平方向上分配空间，使得第二个 Flexible 的宽度是第一个和第三个 Flexible 宽度的两倍。

希望这个示例能够帮助你理解如何在Flutter中使用 Flexible 组件进行布局。如果你有其他问题或需要进一步的帮助，请告诉我！

回到顶部