Flutter中的MaterialApp 和 Scaffold组件

发布于 3 年前 作者 phonegap100 1119 次浏览 最后一次编辑是 3 年前 来自 分享

1、Flutter中的MaterialApp组件

Flutter中的MaterialApp组件是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

Flutter中的MaterialApp组件中的常用属性:

home(主页)

title(标题)

color(颜色)

theme(主题)

routes(路由)

2、Flutter中的Scaffold组件

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

Flutter中的Scaffold组件 有下面几个主要属性:

appBar - 显示在界面顶部的一个 AppBar。

body - 当前界面所显示的主要内容 Widget。

drawer - 抽屉菜单控件。

import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:"我是一个标题",
      home:Scaffold(               
        appBar: AppBar(
          title:Text('IT营'),
          elevation: 30.0,  //设置标题阴影  不需要的话值设置成0.0
        ),
        body: MyHome(),
      ),
      theme: ThemeData(   //设置主题颜色
        primarySwatch: Colors.yellow
      ),
    );
  }
}

class MyHome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        "我是Dart一个文本内容",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          fontWeight: FontWeight.bold,
          color: Colors.black38
          // color: Color.fromRGBO(255, 222, 222, 0.5)
          
        ),
      ),
    );;
  }
}
回到顶部