Flutter开发常见问题

Flutter URL编码转换

var uri = 'http://example.org/api?foo=some message';
var encoded = Uri.encodeFull(uri);
assert(encoded == 'http://example.org/api?foo=some%20message');

var decoded = Uri.decodeFull(encoded);
assert(uri == decoded);

DIO详细使用教程

https://github.com/flutterchina/dio/blob/master/README-ZH.md#%E8%AF%B7%E6%B1%82%E5%8F%96%E6%B6%88

垂直分割线

方式一

Container(
  margin: EdgeInsets.fromLTRB(11, 0, 11, 0),
  color: Colors.grey,
  width: 1,
  height: 12,
  child: Text(""),
),

方式二

Container(
    margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
    height: 12,
    child: VerticalDivider(color: Colors.grey)
),

// 横向分割线
return Divider(
  color: Colors.grey,
  indent: 15,	// 分割距离
  endIndent: 15, 	// 结束距离
  thickness: 0.5, 	// 厚度
  height: 0.5,
);

Row属性MainAxisAlignment，看图就能理解

start

end

center

spaceBetween

spaceAround

spaceEvenly

矩形圆角

ClipRRect(
  borderRadius: BorderRadius.circular(6),
  child: Image.network(
    this.data.userImgUrl,
    width: 50,
    height: 50,
  ),
),

 ClipRRect(
     // 指定圆角
  borderRadius: BorderRadius.only (
        bottomLeft: Radius.circular(8),
        bottomRight: Radius.circular(8),
      ),

圆形圆角

CircleAvatar(
  radius: 25,
  backgroundColor: Colors.white,
  child: Image.asset(
    this.data.bankLogoUrl,
    width: 36,
    height: 36,
    fit: BoxFit.scaleDown,
  ),
),

Grid.Builder 使用

return GridView.builder(
  shrinkWrap: true,
  itemCount: programmeList.length,
  physics: NeverScrollableScrollPhysics(),
  padding: EdgeInsets.symmetric(horizontal: 16),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    mainAxisSpacing: 10, // 行间距
    crossAxisSpacing: 30, // 横间距
    childAspectRatio: 0.7,
  ),
  itemBuilder: (context, index) {
    return Programme(data: programmeList[index]);
  },
);

作为空的 Container 和 SizedBox，该用哪一个？

推荐用SizedBox，从对比来看，SizedBox更为轻量，没有child，没有height，没有width，没有constraints，没有alignment。

解决输入文本框，文字和光标不对齐

style: TextStyle(
  textBaseline: TextBaseline.alphabetic, // 解决光标和文字不对齐
),

解决ICON和光标距离过长

问题发生原因，ICON默认会向后面填充16dps，内部底层注释中有说明。

方式一：

解决方法，可以用prefix，代替icon

decoration: InputDecoration(
    prefix: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Image.asset(
          AssetImagePath.icon_home_search,
          width: 15,
          height: 15,
        ),
        SizedBox(
          width: 5,
        ),
      ],
    ),
    hintText: Environment.appString.breakThroughTheSky,
    contentPadding: const EdgeInsets.symmetric(vertical:5, horizontal: 0),
    border: InputBorder.none
),

方式二：

contentPadding，left填负数。

decoration: InputDecoration(
    icon: Image.asset(
      AssetImagePath.icon_home_search,
      width: 15,
      height: 15,
    ),
    hintText: Environment.appString.breakThroughTheSky,
    contentPadding: const EdgeInsets.only(top:5, bottom: 5, left: -16),
    border: InputBorder.none
),

使用ClippedView解决，溢出UI问题

可滑动删除的列表项flutter_slidable

设置程序全屏

SystemChrome.setEnabledSystemUIOverlays(const []);

获取组件宽度和高度

GlobalKey debugKey = GlobalKey();

Future.delayed(Duration(seconds: 4), () {
  var object = debugKey.currentContext.findRenderObject() as RenderBox;
  Size size = object.size;
  print("width: ${size.width} height: ${size.height}");
});

Container(
    key: debugKey
);

内置浏览器

https://github.com/pichillilorenzo/flutter_inappwebview

待解决问题，中文输入框，光标很小

全局Context

GlobalKey<NavigatorState> navigatorState;
navigatorState = GlobalKey();

MaterialApp(
      title: 'Flutter Demo',
      navigatorKey: navigatorState,	// 在这里添加
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PreviewPage('assets/ui/startup.json'),  // startup
    );

/// 全局获取context
var context = navigatorState.currentState.overlay.context;

详解Flutter中的Key，导致刷新界面

https://www.jianshu.com/p/fc88c0774078

https://github.com/devilsen/LearnFlutter