Flutter - Scaffold

Flutter - Scaffold 首页 / Flutter入门教程 / Flutter - Scaffold

脚手架(Scaffold)是Flutter中的一个小部件，用于实现基本的material设计视觉布局结构。创建通用移动应用程序的速度足够快，几乎包含了Flutter应用程序所需的所有内容。该小部件能够占据整个设备屏幕。换句话说，无涯教程可以说它主要负责为应用程序屏幕创建基础，子控件在该基础上保留并呈现在屏幕上。它提供了许多小部件或API，用于显示Drawer，SnackBar，BottomNavigationBar，AppBar，FloatingActionButton等。

Scaffold类是设置应用程序外观和设计的快捷方式，它使无涯教程不必手动构建各个视觉元素。它节省了无涯教程为应用程序的外观编写更多代码的时间。以下是Scaffold小部件类的构造函数和属性。

复制代码
const Scaffold({
  Key key,
  this.appBar,
  this.body,
  this.floatingActionButton,
  this.floatingActionButtonLocation,
  this.persistentFooterButtons,
  this.drawer,
  this.endDrawer,
  this.bottomNavigationBar,
  this.bottomSheet,
  this.floatingActionButtonAnimator,
  this.backgroundColor,
  this.resizeToAvoidBottomPadding = true,
  this.primary = true,
})

让无涯教程详细了解以上所有属性。

AppBar

它是一个水平条，主要显示在“Scaffold”小部件的顶部。它是Scaffold小部件的主要部分，并显示在屏幕顶部。没有此属性，脚手架小部件将不完整。它使用本身包含各种属性(例如elevation，title，brightness等)的appBar小部件。请参见以下示例:

复制代码
Widget build(BuildContext context) 
{
  return Scaffold(
    appBar: AppBar(
      title: Text('First Flutter Application'),
    ), )
}

在上面的代码中，标题属性使用Text widget来显示屏幕上的文本。

Body

这是此小部件的另一个主要属性和必需属性，它将在Scaffold中显示主要内容。它表示appBar下方，floatingActionButton和drawer后面的位置。默认情况下，主体内部的小部件位于可用空间的左上角。请参见以下代码:

复制代码
Widget build(BuildContext context) { 
return Scaffold( 
	appBar: AppBar( 
	title: Text('First Flutter Application'), 
	), 
	body: Center( 
	child: Text("Welcome to Learnfk", 
		style: TextStyle( color: Colors.black, fontSize: 30.0, 
		), 
	     ), 
	),
}

在上面的代码中，无涯教程已经显示了文本"Welcome to learnfk "在正文属性中。使用 center窗口小部件，在页面的Center中对齐。在这里，无涯教程还通过使用 textstyle 窗口小部件(如color，fontSize等)进行了调整了文本。

Drawer

它是显示在主体侧面的滑块面板。通常，它在移动设备上是隐藏的，但用户可以从左向右或从右向左滑动以访问抽屉菜单。它使用“drawer”窗口小部件属性从“scaffold”边缘沿水平方向滑动，以显示应用程序中的导航链接。将在appBar属性中自动设置抽屉的适当图标。手势也自动设置为打开抽屉。请参阅以下代码。

复制代码
drawer: Drawer( 
		child: ListView( 
		children: const <Widget>[ 
		DrawerHeader( 
			decoration: BoxDecoration( 
			color: Colors.red, 
			), 
			child: Text( 
			'Welcome to Learnfk', 
			style: TextStyle( 
				color: Colors.green, 
				fontSize: 30, 
			), 
		      ), 
		), 
		ListTile( 
			title: Text('1'), 
		), 
		ListTile(
			title: new Text("All Mail Inboxes"),
			leading: new Icon(Icons.mail),
		),
		Divider(
			height: 0.2,
		),
		ListTile(
			title: new Text("Primary"),
		),
		ListTile(
			title: new Text("Social"),
		),
		ListTile(
			title: new Text("Promotions"),
		), 
	    ], 
         ), 
  ),

在上面的代码中，无涯教程使用Scaffold的抽屉属性创建抽屉。无涯教程还使用了其他一些小部件来使其具有吸引力。在ListView小部件中，无涯教程将面板分为两部分，Header和Menu。 DrawerHeader属性根据应用程序修改面板标题，该面板标题还包含图标或详细信息。同样无涯教程使用ListTile在菜单中添加列表项。

FloationActionButton

它是一个按钮显示在右下角，漂浮在body上方。它是一个圆形图标按钮，它在一个固定位置漂浮在屏幕的内容上，以促进应用程序中的主要动作。它使用 scaffold.floationActionButton 使用FloationActionButton窗口小部件属性。请参阅以下代码:

复制代码
Widget build(BuildContext context) { 
         return Scaffold( 
	appBar: AppBar(title: Text('First Flutter Application')), 
	body: Center( 
		child: Text("Welcome to Learnfk!!"), 
	), 
	floatingActionButton: FloatingActionButton( 
		elevation: 8.0, 
		child: Icon(Icons.add), 
		onPressed: (){ 
		   print('I am Floating Action Button');
		} 
	); 
}

在上面的代码中，无涯教程使用了elevation属性，该属性为按钮提供阴影效果。无涯教程还使用“Icon widget”使用预加载的Flutter SDK图标为按钮提供图标。当用户点击按钮时，将调用onPressed()属性，并且控制台上将打印“ I is Floating Action Button”语句。

BackgroundColor

此属性用于设置整个Scaffold小部件的背景颜色。

backgroundColor: Colors.yellow,

Primary 

它用于判断支架是否将显示在屏幕顶部。它的默认值是true，表示appBar的高度扩展了屏幕状态栏的高度。

primary: true/false,

PersistentFooterButtons

它是显示在Scaffold小部件底部的按钮列表。这些属性项始终可见；即使无涯教程已经滚动了脚手架的主体。它始终包装在ButtonBar小部件中。它们呈现在主体下方但在bottomNavigationBar上方。

复制代码
persistentFooterButtons: <Widget>[
  RaisedButton(
    onPressed: () {},
    color: Colors.blue,
    child: Icon(
      Icons.add,
      color: Colors.white,
    ),
  ),
  RaisedButton(
    onPressed: () {},
    color: Colors.green,
    child: Icon(
      Icons.clear,
      color: Colors.white,
    ),
  ),
],

在上面的代码中，无涯教程使用了在脚手架底部显示的 RaisedButton 。无涯教程还可以使用 FlatButton 而不是RaisedButton。

BottomNavigationBar

此属性就像一个菜单，在底部显示一个导航栏。此属性允许开发人员在栏中添加多个图标或文本作为项目。它应该在body和persistentFooterButtons下面呈现。请参见以下代码:

复制代码
bottomNavigationBar: BottomNavigationBar(
  currentIndex: 0,
  fixedColor: Colors.grey,
  items: [
    BottomNavigationBarItem(
      title: Text("Home"),
      icon: Icon(Icons.home),
    ),
    BottomNavigationBarItem(
      title: Text("Search"),
      icon: Icon(Icons.search),
    ),
    BottomNavigationBarItem(
      title: Text("User Profile"),
      icon: Icon(Icons.account_circle),
    ),
  ],
  onTap: (int itemIndex){
    setState(() {
      _currentIndex = itemIndex;
    });
  },
),

在上面的代码中，无涯教程使用了BottomNavigationBar小部件来显示菜单栏。 fixedColor属性用于活动图标的颜色。 BottomNavigationBarItems小部件用于在包含文本和图标作为其子属性的栏中添加项目。当无涯教程点击项目时，无涯教程还使用了onTap(int itemIndex)函数来执行操作，该操作根据它们的索引位置进行。

EndDrawer

它类似于抽屉属性，但是默认情况下它们显示在屏幕的右侧。可以从右向左或从左向右滑动。

ResizeToAvoidBottomInset

如果true，则主体和脚手架的浮动小部件应自行调整其大小，以避免出现屏幕键盘， bottom属性定义屏幕键盘的高度。

FloationActionButtonLocation

 默认情况下，它位于屏幕的右下角。它用于确定floatActionButton的位置。它包含许多预定义的常量，例如centerDocked，centerFloat，endDocked，endFloat等。

 

让无涯教程看看无涯教程尝试使用大多数脚手架属性的示例，以便快速轻松地了解此小部件。

在此示例中，无涯教程将看到具有AppBar，BottomAppBar，FloateActionButton，FloateActionButton位置和drawer属性的脚手架小部件。

复制代码
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// 这个小部件是主要的应用小部件。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Scaffold Example'),
      ),
      body: Center(
        child: Text('We have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      drawer: Drawer(
        elevation: 20.0,
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text("learnfk"),
              accountEmail: Text("learnfk@gmail.com"),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.yellow,
                child: Text("abc"),
              ),
            ),
            ListTile(
              title: new Text("Inbox"),
              leading: new Icon(Icons.mail),
            ),
            Divider( height: 0.1,),
            ListTile(
              title: new Text("Primary"),
              leading: new Icon(Icons.inbox),
            ),
            ListTile(
              title: new Text("Social"),
              leading: new Icon(Icons.people),
            ),
            ListTile(
              title: new Text("Promotions"),
              leading: new Icon(Icons.local_offer),
            )
          ],
        ),
      ),
    );
  }
}

当无涯教程在IDE中运行此项目时，无涯教程将看到UI作为以下屏幕截图。

Flutter Scaffold

如果无涯教程点击屏幕左上角可以看到的三行，无涯教程将看到抽屉。抽屉可以右侧或向左右侧刷新。看到下面的图片。

Flutter Scaffold

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Nginx核心知识150讲 -〔陶辉〕

玩转Git三剑客 -〔苏玲〕

高并发系统设计40问 -〔唐扬〕

跟月影学可视化 -〔月影〕

容器实战高手课 -〔李程远〕

程序员的测试课 -〔郑晔〕

编程高手必学的内存知识 -〔海纳〕

深入浅出分布式技术原理 -〔陈现麟〕

Vue 3 企业级项目实战课 -〔杨文坚〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630