Fiutter- App级别组件

前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

MaterialApp

创建新项目时的Material Design样式的根控件

MaterialApp(
      title: 'Mike Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: TestHomePage(title: 'Flutter Demo Home Page'),
    )

title 表示应用的描述，在Android中显示在应用管理器的快照，IOS则会忽略此属性
home 表示应用的根页面
theme 表示应用的整体风格,主题色，字体等
onGenerateTitle 可以根据不同的业务显示不同的应用描述信息
routes 指定所有的路由信息，用于页面切换和跳转
initialRoute 如果设置为/则加载home对应的页面，否则去到routes中进行匹配
onGenerateRoute 如果initialRoute匹配路由失败，则加载onGenerateRoute指定的组件
onUnknownRoute 如果onGenerateRoute返回null,并且home也为null，则加载此处返回的组件
showPerformanceOverlay 表示是否打开性能测试
debugShowCheckedModeBanner 表示是否显示右上角Debug标志

使用路由进行页面切换

入口文件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mike Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      routes: {
        '/home':(BuildContext context) => HomePage(),
        '/login':(BuildContext context) => LoginPage()
      },
      initialRoute: '/home'
    );
  }
}

HomePage

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(centerTitle: true, title: Text("Home")),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.center,
        child: Ink(
            decoration: BoxDecoration(
                color: Colors.blue, borderRadius: BorderRadius.circular(20)),
            child: InkWell(
              borderRadius: BorderRadius.circular(20),
              onTap: () {
                //Jump to Login page
                Navigator.pushNamed(context, "/login");
              },
              splashColor: Colors.white,
              child: Container(
                width: 100,
                height: 40,
                alignment: Alignment.center,
                child: Text(
                  'Go to Login',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )),
      ),
    );
  }
}

LoginPage

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(centerTitle: true, title: Text("Login")),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.center,
        child: Ink(
            decoration: BoxDecoration(
                color: Colors.blue, borderRadius: BorderRadius.circular(20)),
            child: InkWell(
              borderRadius: BorderRadius.circular(20),
              onTap: () {
                Navigator.pop(context);
              },
              splashColor: Colors.white,
              child: Container(
                width: 100,
                height: 40,
                alignment: Alignment.center,
                child: Text(
                  'Back to Home',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )),
      ),
    );
  }
}

效果

1634978626266.gif

脚手架

Scaffold 实现了Material风格的基本布局结构

appBar 用来指定标题
body 用来指定标题以下所展示的组件
drawer 用来指定侧边栏抽屉组件
bottomNavigationBar 用来指定底部导航栏
floatingActionButton 用来指定悬浮按钮

Scaffold(
      appBar: AppBar(centerTitle: true, title: Text("Home")),
      drawer: Container(color: Colors.red),
      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home),label:'Text' ),
        BottomNavigationBarItem(icon: Icon(Icons.home),label:'Text' )
      ],),
      floatingActionButton: FloatingActionButton(onPressed: () {

      },),
    )

scaffold.png

AppBar

应用程序栏目

title 标题，默认在左上角，一般用来设置文本或者图片组件
centerTitle 标题是否居中
leading 一般用来指定返回按钮也可以自定义组件
bottom 一般用来定义TabBar

class HomePage extends StatefulWidget {
  @override
  State createState() {
    return HomePageStates();
  }
}

class HomePageStates extends State
    with SingleTickerProviderStateMixin {
  late TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          isScrollable: true,
          tabs: [
            Text('麻将社团'),
            Text('RPG社团'),
            Text('LOL社团'),
            Text('王者荣耀社团'),
          ],
          controller: controller,
        ),
        title: Text('Home'),
        centerTitle: true,
        leading: Container(
            height: double.infinity,
            alignment: Alignment.center,
            child: Text('Close')),
      ),
      drawer: Container(color: Colors.red),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Text'),
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Text')
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
    );
  }
}

AppBar.png

SnackBar

onTap: () {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        action: SnackBarAction(
            label: "Confirm",
            onPressed: () {
                        
             },
        ),
        content: Text('网络异常，请稍后重试')));
},

snack.png

欢迎关注Mike的

Android 知识整理