关于python:Flutter-适配移动端和web不同尺寸

43次阅读

共计 694 个字符,预计需要花费 2 分钟才能阅读完成。

用到的库

这款开源的库, 能够实现不同屏幕尺寸的适配.responsive_builder

应用办法

1. pubspec.yaml 引入库 responsive_builder: ^0.3.0

2. 代码援用 import 'package:responsive_builder/responsive_builder.dart';

3. 像应用一般控件一样, 应用如下代码:

ResponsiveBuilder(builder: (context, sizingInformation) {
                if (sizingInformation.deviceScreenType ==
                    DeviceScreenType.desktop) {
                  return Container(
                    color: Colors.blue,
                    child: Text("desktop"),
                  );
                }

                if (sizingInformation.deviceScreenType ==
                    DeviceScreenType.tablet) {
                  return Container(
                    color: Colors.red,
                    child: Text("tablet"),
                  );
                }

                if (sizingInformation.deviceScreenType ==
                    DeviceScreenType.watch) {
                  return Container(
                    color: Colors.yellow,
                    child: Text("watch"),
                  );
                }
                return Container(
                  color: Colors.green,
                  child: Text("mobile"),
                );
              },
            ),
        
    以上代码, 能够在不同尺寸的状况下, 返回不同的 Container.

其余参考文章

正文完
 0