Flutter 肤浅的学习笔记

1. IndexStack和PageView使用区别

1.1 IndexStack为层叠布局，会在初始化时，同时初始化所有的子视图；

1.2 PageView为滚动视图布局，在视图显示时，初始化当前显示视图；滚动时，初始化需要显示的视图。

注意：PageView不会缓存子视图，如需换成子视图，可以让子视图混入AutomaticKeepAliveClientMixin

class CacheWidget extends StatefulWidget {
  const CacheWidget({Key? key}) : super(key: key);

  @override
  State<CacheWidget> createState() => _CacheWidgetState();
}

class _CacheWidgetState extends State<CacheWidget> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const Placeholder();
  }

  @override
  bool get wantKeepAlive => true;
}

2. FractionallySizedBox

2.1 此组件可以通过设置widthFactor和heightFactor控制其为父控件宽高的比例

Stack(children: [
  FractionallySizedBox(
    alignment: Alignment.topLeft,
    widthFactor: 1,
    heightFactor: 1,
    child: Container(
      height: 4,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(2),
      ),
    ),
  ),
  FractionallySizedBox(
    alignment: Alignment.topLeft,
    widthFactor: 0.5,
    heightFactor: 1,
    child: Container(
      height: 4,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(2),
      ),
    ),
  ),
]),

以上代码达成的效果是第二个FractionallySizedBox宽度为Stack组件的一半，位于第一个FractionallySizedBox上方。

3. 导航栏透明

 Scaffold(
    extendBodyBehindAppBar: true, // 使body可以扩展到appbar之后
    appBar: AppBar(
      backgroundColor: Colors.transparent, // 设置透明
      elevation: 0, // 去除阴影
    ),
 );