脚手架(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, })
让无涯教程详细了解以上所有属性。
它是一个水平条,主要显示在“Scaffold”小部件的顶部。它是Scaffold小部件的主要部分,并显示在屏幕顶部。没有此属性,脚手架小部件将不完整。它使用本身包含各种属性(例如elevation,title,brightness等)的appBar小部件。请参见以下示例:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Flutter Application'), ), ) }
在上面的代码中,标题属性使用Text widget来显示屏幕上的文本。
这是此小部件的另一个主要属性和必需属性,它将在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”窗口小部件属性从“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在菜单中添加列表项。
链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-scaffold.html
来源:LearnFk无涯教程网
它是一个按钮显示在右下角,漂浮在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”语句。
此属性用于设置整个Scaffold小部件的背景颜色。
backgroundColor: Colors.yellow,
它用于判断支架是否将显示在屏幕顶部。它的默认值是true,表示appBar的高度扩展了屏幕状态栏的高度。
primary: true/false,
它是显示在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。
此属性就像一个菜单,在底部显示一个导航栏。此属性允许开发人员在栏中添加多个图标或文本作为项目。它应该在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)函数来执行操作,该操作根据它们的索引位置进行。
它类似于抽屉属性,但是默认情况下它们显示在屏幕的右侧。可以从右向左或从左向右滑动。
如果true,则主体和脚手架的浮动小部件应自行调整其大小,以避免出现屏幕键盘, bottom属性定义屏幕键盘的高度。
默认情况下,它位于屏幕的右下角。它用于确定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作为以下屏幕截图。
如果无涯教程点击屏幕左上角可以看到的三行,无涯教程将看到抽屉。抽屉可以右侧或向左右侧刷新。看到下面的图片。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Python实战 · 从0到1搭建直播视频平台 -〔Barry〕