共计 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.
其余参考文章
正文完