Flutter 关于页面的简单整理

1.StatefulWidget -- 可变状态容器，如 Switch 部件的两个显示状态，可切换开或关对应不同的显示。

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

2. StatelessWidget -- 不可变状态容器，如Text部件，常用于静态样式显示。

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

3. 页面跳转

Navigator.push( context, MaterialPageRoute( builder:(context)=> Page() ) );

简单封装：

Future LzPushPage(Widget page, BuildContext context) async =>await Navigator.push(context, MaterialPageRoute(builder: (context) => page));

用法：

// 不带返回值
LzPushPage(Page(), context);
// 带返回值
var obj = await LzPushPage(Page(), this.context);

4. 页面返回

Navigator.pop(context);

简单封装：

void LzPopPage(BuildContext context, {Object object}) =>Navigator.pop(context, object);

用法：

// 不带返回值
LzPopPage(context)
// 带返回值
LzPopPage(context, object: obj)

5. 获取上下文宽高

MediaQuery.of(context).size

6. 收起上下文内的键盘

FocusScope.of(context).requestFocus(FocusNode());

简单封装：

LzDismissKeyBoard(BuildContext context) =>FocusScope.of(context).requestFocus(FocusNode());

用法：

LzDismissKeyBoard(context);

7. 状态栏主题设置

// SystemUiOverlayStyle.light 状态栏字体为白色
// SystemUiOverlayStyle.dark 状态栏字体为黑色
AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.dark,
    child: child,
  );

简单封装：

Widget LzStatusBar({Widget child, bool isWhite=false}){
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: isWhite?SystemUiOverlayStyle.light:SystemUiOverlayStyle.dark,
    child: child,
  );
}

用法：

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    return LzStatusBar(
         isWhite : true,
           child : Scaffold()
    );
  }
}

8. 导航栏

// automaticallyImplyLeading：是否展示左边部件
// leading：自定义导航栏左边部件
// actions：自定义导航栏右边部件
// centerTitle：标题是否居中显示
// brightness：状态主题
// backgroundColor：导航栏背景颜色
// title：标题文字
// iconTheme：图标主题
// elevation：导航栏底部线条厚度，设置成0则不显示线条
AppBar()；

简单封装：

AppBar LzAppBar({bool isHideBack=false,Widget leading,String title, Widget child,Color bgColor, Color tColor, double fontSize = 18, bool isShowLine = false, List <Widget>actions}){
  return AppBar(
    automaticallyImplyLeading: !isHideBack,
    leading: leading,
    centerTitle: true,
    brightness: bgColor!=null?Brightness.dark:Brightness.light,
    backgroundColor: bgColor==null?LzColor.c_White:bgColor,
    title: child!=null?child:LzText.m_Text(fontSize, title, tColor!=null?tColor:LzColor.c_333333),
    iconTheme: IconThemeData(color: tColor!=null?tColor:LzColor.c_333333),
    elevation: isShowLine?4:0,
    actions: actions,
  );
}

用法：

Scaffold(
   appBar: LzAppBar(
           title:'标题'  
          ）
);

9. 底部导航栏

// currentIndex：当前显示页面索引
// iconSize：图标大小
// type：Item 填充样式
// onTap：点击Item
// items：按钮集合
BottomNavigationBar( )

用法：

BottomNavigationBar(
        currentIndex: this.currentIndex,
        iconSize: 30.0,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('页面一'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('页面二'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('页面三'),
          ),
        ],
      )

10. 设置不显示状态栏隐藏

// SystemUiOverlay.values 显示所有
// SystemUiOverlay.bottom 显示底部（如果有）
// SystemUiOverlay.top       显示顶部
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);