Flutter 知识点总结

屏幕适配原理

flutter_screenutil:

说一下适配方案, 比如我们设计师设计的UI是根据Iphone6来做的,我们知道 iPhone6的分辨率是750*1334(px)、

又或者是根据hdpi的设备来设计的UI,我们知道hdpi的 Android设备是 (240 dpi),像素密度是1.5,即hdpi设备的分辨率宽度是320px, 总之,无论设计稿的单位是px,或者是dp,我们都能够转换成px.
那么我们如果根据px来适配,ios和 android 就都可以兼容了.
假设,我们的设计稿手机是10801920 px.
设计稿上有一个540960 的组件, 即宽度和宽度是手机的一半. 如果我们直接写的时候组件的尺寸这么定义,在其他尺寸的设备上未必是一半,或多,或少. 但是我们可以按比例来看,即我们要实现的宽度是实际设备的一半.
那么假设我们设备的宽度是deviceWidth和deviceHeight , 我们要写的组件大小为: 宽:(540/1080)deviceWidth,高度: (960/1920)deviceHeight.
通过这个公式我们可以发现,我们要写的组件宽度就是设计稿上的尺寸width(deviceWdith/原型设备宽度).那么每次我们写ui的时候,只要直接哪来设计稿的尺寸(deviceWdith/设备原型)宽度即可
原理就是先获取,实际设备与原型设备的尺寸比例.

将主轴空白位置进行均分,排列子元素,首尾子控件距边缘没有间隙
MainAxisAlignment.spaceAround
将主轴空白区域均分,使中间各个子控件间距相等,首尾子控件距边缘间距为中间子控件间距的一半
MainAxisAlignment.spaceEvenly
将主轴空白区域均分,使各个子控件间距相等

flutter column row布局的列表自适应宽高
mainAxisSize: MainAxisSize.min

通过runtimeType可以获取当前数据类型
var e = [12.5,13.1];
print('e 的类型是: ${e.runtimeType}'); // e 的类型是: List<double>

flutter column嵌套listview不能滚动,或者不显示的问题

因为 listview水平视口的宽度是无限的。
在listview外面嵌套一个expanded,或者一个container就可以了,尺寸计算的问题,expande就是listview有多大就有多大,container就是container多大listview就有多大,可以滚动

 child: Row(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
                itemCount: 120,
                itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Text('${index}'),
                ),
              ),
            ),
          ],
        ),

推荐阅读更多精彩内容