初学flutter学习知识点汇总跟着买的视频，学习了一下flutter，整理了一些flutter知识点，项目地址 1.S

跟着买的视频，学习了一下flutter，整理了一些flutter知识点，项目地址

1.Scaffolder

/**代表页面布局结构的组件，通过它我们可以轻松实现底部导航、顶部AppBar、侧拉抽屉、悬浮按钮等效果的页面布局**/

2.构造方法

// 构造方法
/*
1.{},中的，说明是可选参数
2.冒号后面，初始化列表
 */
const ContentPager({Key? key, required this.onPageChanged, required this.contentPagerController}) : super(key: key);

3.BoxDecoration

/**盒式装饰器，也是最常见的一种装饰器，通过它我们轻松描述容器盒子的样式**/
decoration: BoxDecoration(
  gradient: LinearGradient(
    colors: [
      Color(0xffedeef0),
      Color(0xffe6e7e9),
    ],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
),

4.BottomNavigationBar

// 底部Tarbar实现
 bottomNavigationBar: BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: (index) {
        //控制内容区域滚动到指定位置
        _contentPagerController.jumpToPage(index);
        //修改状态
        setState(() {
          _currentIndex = index;
        });
      },
      type: BottomNavigationBarType.fixed,
      items: [
        _bottomItem('本周', Icons.folder, 0),
        _bottomItem('分享', Icons.explore, 1),
        _bottomItem('免费', Icons.donut_small, 2),
        _bottomItem('长安', Icons.person, 3),
      ]),
);

//封装底部Tab
_bottomItem(String title, IconData icon, int index) {
  return BottomNavigationBarItem(
      icon: Icon(
        icon,
        color: _defaultColor,
      ),
      activeIcon: Icon(
        icon,
        color: _activeColor,
      ),
      title: Text(
        title,
        style: TextStyle(
            color: _currentIndex != index ? _defaultColor : _activeColor),
      ));
}

5.PageView，相当于ios中CollectionView

Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      //appBar
      CustomAppBar(),
      Expanded(
          //高度撑开，否则在Column中没有高度会报错
          child: PageView(
        onPageChanged: widget.onPageChanged,
        controller: _pageController,
        children: <Widget>[
          _wrapItem(CardRecommend()),
          _wrapItem(CardShare()),
          _wrapItem(CardFree()),
          _wrapItem(CardSpecial()),
        ],
      ))
    ],
  );
}

scrollDirection

滚动方向,分为 Axis.horizontal 和 Axis.vertical。

reverse

反转，是否从最后一个开始算0

controller

PageController 控制初始化第几个，占屏幕的范围。

initialPage 初始化第一次默认在第几个。
viewportFraction 占屏幕多少，1为占满整个屏幕
keepPage
是否保存当前 Page 的状态，如果保存，下次回复对应保存的 page，initialPage被忽略，如果为 false 。下次总是从 initialPage 开始。

physics

滚动的方式

BouncingScrollPhysics 阻尼效果
ClampingScrollPhysics 水波纹效果

pageSnapping

是否具有回弹效果，默认为 true

onPageChanged

监听事件

children

具体子控件的布局

注意：pageView滚动 -> tarbar ,通过，

// pageView回调，给BottomNavigationBar
child: ContentPager(onPageChanged: (int index){
  setState(() {
    _selectIndex = index;
  },);

}, contentPagerController: _contentPagerController,)

tarbar点击 -> pageView滚动，通过设置中转类ContentPagerController

class ContentPagerController {
  late PageController _pageController;
  void jumpToPage(int page) {
     _pageController?.jumpToPage(page);
  }
}

// initState是state创建的第一个方法
@override
void initState() {
  if (widget.contentPagerController != null){
    widget.contentPagerController._pageController = _pageController;
  }
  _statusBar();
  super.initState();
}

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  currentIndex: _selectIndex,
  items: [
  _bottomNavigItem("本周", Icons.folder, 0),
  _bottomNavigItem("分享", Icons.explore, 1),
  _bottomNavigItem("免费", Icons.donut_small, 2),
  _bottomNavigItem("长安", Icons.person, 3),
],
  onTap: (index) {
    _contentPagerController.jumpToPage(index);
    // 修改状态
    setState(() {
      _selectIndex = index;
    });
  },
),

6. 沉浸式状态栏

/// 状态栏- 沉浸式状态栏
_statusBar(){
  // 黑色沉浸式状态栏，基于SystemUiOverlayStyle.dark修改了statusBarColor
  SystemUiOverlayStyle UiOverlayStyle = const SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000),
    systemNavigationBarDividerColor: null,
    statusBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  );
  SystemChrome.setSystemUIOverlayStyle(UiOverlayStyle);
}

7. 阴影

child: Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        offset: Offset(0, 20), // 0，水平偏移距离，20垂直偏移距离
        blurRadius: 20 // 模糊半径
      )
    ]
  ),

8. Stack

//绝对布局,一般与Positioned，一起使用
Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    Image.network(
      'http://www.devio.org/io/flutter_beauty/book_cover/${item['cover']}',
      fit: BoxFit.cover,
    ),
    Container(
      width: 30,
      height: 30,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Colors.black38),
      child: Icon(
        Icons.play_arrow,
        color: Colors.white,
      ),
    ),
    Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Container(
          padding: EdgeInsets.all(3),
          decoration: BoxDecoration(color: Colors.black54),
          child: Text(
            '原价${item['price']}',
            style: TextStyle(color: Colors.white, fontSize: 10),
          ),
        ))
  ],
),

9. Grid，网格布局

// 用网格展示数据最简单的方式，就是通过使用 GridView.count()构造方法，因为它允许我们指定有多少行多少列。

return GridView.count(
    // 一行有多少个
  crossAxisCount: 3,
  // 垂直间距
  mainAxisSpacing: 10,
  // 水平间距
  crossAxisSpacing: 15,
  // 长宽必
  childAspectRatio: 0.46,
  padding: const EdgeInsets.only(left: 30, right: 20),
  children: BOOK_LIST.map((item) {
     return _item(item);
  }).toList(),
);

10.Expanded，撑满父容器

return Expanded(child: Container(
  /// 通过BoxConstraints尽可能撑满父容器
    constraints: BoxConstraints.expand(),
    margin: EdgeInsets.only(top: 20),
    child: Image.network('http://www.devio.org/io/flutter_beauty/card_1.jpg',
        fit: BoxFit.cover),//宽高会充满容器，会裁剪

));

11.MediaQuery，刘海屏-安全高度的适配

// 刘海屏-安全高度的适配
double paddingTop = MediaQuery.of(context).padding.top;