Flutter开发遇到的问题

1.获取屏幕上各个宽度长度

MediaQuery.of(context).size.width

2.设置状态栏style

// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前       MaterialApp组件会覆盖掉这个值。
SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

3.设置AppBar高度

在AppBar外包一层PreferredSize并设置preferredSize字段。

4.点击事件

①在Widget外包一层GestureDetector，里面有短按，长按，双击等事件回调

②在Widget外包一层InkWell，带水波纹点击效果，但是比GestureDetector少一些回调，比如点击坐标

③所有的button都封装有点击回调，如RaisedButton,FlatButton,IconButton...

5.返回事件监听

在Widget外面包一层WillPopScope，重写onWillPop方法，返回false表示被消费，返回true继续分发。如：

onWillPop返回的是Future，所以需要加async。

onWillPop: () async {
  if (_mode == 1) {
    setState(() {
      change2Portrait();
    });
    return false;
  } else {
    return true;
  }
},

6.横竖屏切换

第三方库 orientation: ^1.0.5

用法：

void change2Portrait() {
  OrientationPlugin.forceOrientation(DeviceOrientation.portraitDown);
  SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
}

void change2Landscape() {
  OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
  SystemChrome.setEnabledSystemUIOverlays([]);
}

7.圆角控件

用container包裹，设置decoration shape

用ClipRRect包裹，设置borderRadius，表示圆角弧度。

用FlatButton设置shape

等等

8.PlatformChannel平台端代码必须在主线程响应

9.单写ListView没有和AppBar一起使用的话，ListView顶部会有一段空白，需要使用MediaQuery.removePadding包裹ListView，并设置removeTop: true,

10.关于TextField hinttext与text没有对齐的问题

解决办法有两种，一是移除MaterialApp中的supportedLocales，二是在MaterialApp中添加ThemeData textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabetic)),

11.一个界面中不能出现多个FloatingActionButton，如果确实需要，则给多个FloatingActionButton分别设置heroTag字段区别开。

12.弹窗上需要改变状态时要用StatefulBuilder，如

showModalBottomSheet(
  context: context,
  builder: (context) {
    return StatefulBuilder(
      builder: (context, state) { //这里的state表示setState，避免和外层的setState搞混，所以重命名为state
        return Container(
          child: RaisedButton(
            child: Text(_data),
            onPressed: () {
              state(() {
                _data = '456';
              });
            },
          ),
        );
      },
    );
  },
);

13.在ListView需要滑动到最底部时

_controller.animateTo(_controller.position.maxScrollExtent + 300, duration: Duration(milliseconds: 10), curve: Curves.ease);

14.ios打包到蒲公英测试流程

1.项目工程目录下执行flutter build ios --release 2.生成build/ios/iphoneos/Runner.app 3.新建Payload文件夹，将Runner.app放到Payload下面 4.压缩Payload文件夹 5.将Payload.zip重命名为Payload.ipa 6.上传到蒲公英

15.android studio插件，FlutterJsonBeanFactory，可以生成json对应的dart bean文件

16.点击水波纹特效在child设置了color时可能会失效，这时候需要在InkWell外面包一层Material，如

Material(
  color: Colors.green,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12)),
  child: InkWell(
    borderRadius: BorderRadius.circular(12),
    child: Container(
      padding: EdgeInsets.only(
          left: 15, right: 15, top: 10, bottom: 10),
      child: Text(
        '发送',
        style: TextStyle(
            color: Colors.white, fontSize: 14),
      ),
    ),
    onTap: () {
     
    },
  ),
)

17.关于Row、Column中的参数

Row

mainAxisAlignment: MainAxisAlignment.start,//表示Row中各个child在主轴（横向）的对齐方式

crossAxisAlignment: CrossAxisAlignment.center,//表示Row中各个child在对轴（竖向）的对齐方式

mainAxisSize: MainAxisSize.max,//表示Row主轴的长度（宽度）是match_parent还是wrap_content

Column

mainAxisAlignment: MainAxisAlignment.start,//表示Column中各个child在主轴（竖向）的对齐方式

crossAxisAlignment: CrossAxisAlignment.center,//表示Column中各个child在对轴（横向）的对齐方式

mainAxisSize: MainAxisSize.max,//表示Column主轴的长度（高度）是match_parent还是wrap_content

18.flutter中宽度或者高度占满屏幕一般用double.infinity来表示

19.Expanded和Flexible一般用在Row和Column内，Expanded表示撑满父控件剩余大小，Flexible表示有多大就占多大，

如下图两个绿框中都是Flexible，可作为自由伸缩大小的控件使用。

20.横向ListView，设置ListView参数，默认垂直方向， scrollDirection: Axis.horizontal,

21.Text文字上面出现闪烁的线，TextStyle添加decoration: TextDecoration.none。TextField上面出现闪烁的线，可能是由于minLines和maxLines设置的有问题，调整一下试试。

22.一个emoji表情的length是2，如果要按1统计，使用string.runes.length，Runes表示UTF-32定义的Unicode字符串