Linuxword Global
当前位置: 建站相关 > flutter scaffold widget应用

flutter scaffold widget应用

2024-01-04 分类：建站相关 作者：Linux网站管理员 阅读（2037）

b8d90d089976ac3c82e7bfc2da98cbd3

脚手架(Scaffold)类是可扩展的窗口小部件，它填充了可用空间或屏幕。它提供了一个API，用于显示应用程序的主要小部件，例如：Drawer，SnackBar，Bottom-Sheet，FloatingActionButton，AppBar和BottomNavigationBar等。
Scaffold构造器：

  • https://docs-flutter-io.firebaseapp.com/flutter/material/Scaffold/Scaffold.html

Scaffold构造器示例代码：

const Scaffold({
  Key key,
  PreferredSizeWidget appBar,
  Widget body,
  Widget floatingActionButton,
  FloatingActionButtonLocation floatingActionButtonLocation,
  FloatingActionButtonAnimator floatingActionButtonAnimator,
  List<Widget> persistentFooterButtons,
  Widget drawer,
  Widget endDrawer,
  Widget bottomNavigationBar,
  Widget bottomSheet,
  Color backgroundColor,
  bool resizeToAvoidBottomPadding,
  bool resizeToAvoidBottomInset,
  bool primary: true,
  DragStartBehavior drawerDragStartBehavior:   DragStartBehavior.down
})
Dart

1. Scaffold示例

示例-1

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'yiibai.com',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Scaffold Example'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text (
            'Hello World',
          )
      ),
    );
  }
}
Dart

运行上面代码，得到以下结果：

093647_35101

在此示例中，我们创建了一个带有两个参数appBar和body的Scaffold。Scaffold (appBar + body)的示例代码如下：

// Create a Scaffold with 2 parameters: appBar, body.
Scaffold(
  appBar: AppBar(
    title: Text('Flutter Scaffold Example'),
  ),
  body: Center(
      child:
      Text(
        'Hello World',
      )
  ),
);
Dart

2. floatingActionButton按钮

floatActionButton是一个浮动到主体(body)表面的按钮。默认情况下，它将漂浮在屏幕的右下角。可以通过floatActionButtonLocation属性指定其位置。参考下面示例：

094018_85376

示例：main.dart (floatingActionButton)

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "yiibai.com",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text('Flutter Scaffold Example'),
      ),
      body: Center(
          child: Text('You have pressed the button $_count times.')
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()  {
          setState(() => this._count++);
        },
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}
Dart

3. floatingActionButtonLocation

floatActionButtonLocation属性用于指定floatActionButton的显示位置。其默认值为FloatingActionButtonLocation.endFloat。

示例代码：

Scaffold(
  appBar: AppBar(
    title:  Text('Flutter Scaffold Example'),
  ),
  body: Center(
      child: Text('Hello World')
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    color: Colors.black12,
    child: Container(
      height: 50.0,
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    tooltip: 'Increment Counter',
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
Dart

指定floatingActionButton按钮位于下方正中间。如下图所示：
094630_28623

FloatingActionButtonLocation类用来定义FloatingActionButton的显示位置。以下是几个作为此类的静态常量的预定义位置：

  • FloatingActionButtonLocation.centerDocked
  • FloatingActionButtonLocation.centerFloat
  • FloatingActionButtonLocation.centerTop
  • FloatingActionButtonLocation.endDocked
  • FloatingActionButtonLocation.endFloat
  • FloatingActionButtonLocation.endTop
  • FloatingActionButtonLocation.miniCenterDocked
  • FloatingActionButtonLocation.miniCenterFloat
  • FloatingActionButtonLocation.miniCenterTop
  • FloatingActionButtonLocation.miniEndDocked
  • FloatingActionButtonLocation.miniEndFloat
  • FloatingActionButtonLocation.miniEndTo
  • FloatingActionButtonLocation.miniStartDocked
  • FloatingActionButtonLocation.miniStartFloat
  • FloatingActionButtonLocation.miniStartTop
  • FloatingActionButtonLocation.startDocked
  • FloatingActionButtonLocation.startFloat
  • FloatingActionButtonLocation.startTop

Docked

startDocked，centerDocked，endDocked，miniStartDocked，miniCenterDocked和miniEndDocked常量使Scaffold.floatingActionButton可以显示在Scaffold.body表面上，从而使按钮的中心与Scaffold.bottomSheet或Scaffold.persistentFooterButtons或Scaffold.bottomNavigationBar的顶部边框对齐(以这种优先顺序)。

102220_78788

102254_53877

如果Scaffold.bottomSheet和Scaffold.persistentFooterButtons为null，并且Scaffold.bottomNavigationBar是BottomAppBar对象，则Scaffold.floatingActionButton将在Scaffold.bottomNavigationBar的表面上创建一个凹口。

102350_15878

Float

常量startFloat，centerFloat，endFloat，miniStartFloat，miniCenterFloat和miniEndFloat允许Scaffold.floatingActionButton显示在上方，而不会与其他两个小部件Scaffold.persistentFooterButtons和Scaffold.bottomNavigationBar重叠。
102510_39978

102530_44118

如果Scaffold.bottomSheet不为null，则Scaffold.floatingActionButton的中心将与Scaffold.bottomSheet的顶部边框对齐。

162401_56762

Top

startTop，centerTop，endTop，miniStartTop，miniCenterTop，miniEndTop常量使Scaffold.floatingActionButton可以显示在顶部工具栏的正下方，从而使按钮的中心与工具栏的底部边框对齐。

162503_39293

mini

具有mini前缀的常量使Scaffold.floatingActionButton比平时小一些，这等效于FloatingActionButton.mini=true设置。

4. floatingActionButtonAnimator

floatActionButtonAnimator属性用于为FloatingActionButton创建动画效果。

FloatingActionButtonAnimator floatingActionButtonAnimator
Dart

5. 抽屉

抽屉是显示在正文左侧的面板(如果textDirection = TextDirection.ltr)。它通常隐藏在移动设备上，因此需要左右滑动才能显示它。

Widget drawer
Dart

在某些情况下，可以将按钮自动添加到AppBar.leading或AppBar.actions中，以帮助用户快速打开抽屉，下面的文章对此进行了明确说明：

162845_25617

示例代码：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Scaffold Example'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text(
            'Hello World',
          )
      ),
      drawer: Drawer(
        child: ListView(
          children: const <Widget> [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Hello World',
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Gallery'),
            ),
            ListTile(
              title: Text('Slideshow'),
            ),
          ],
        ),
      ),
    );
  }
}
Dart

6. endDrawer

endDrawer是显示在主体右侧的面板(如果textDirection = TextDirection.ltr)。它通常隐藏在移动设备上，因此需要从右向左滑动才能使其显示。

Widget endDrawer
Dart

在某些情况下，可以将按钮自动添加到AppBar.leading或AppBar.actions中，以帮助用户快速打开抽屉，下面的文章对此进行了明确说明：

示例代码

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'yiibai.com',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Scaffold Example'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text(
            'Hello World',
          )
      ),
      endDrawer: Drawer(
        child: ListView(
          children: const <Widget> [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Hello World',
                style: TextStyle(
                  color: Colors.green,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Gallery'),
            ),
            ListTile(
              title: Text('Slideshow'),
            ),
          ],
        ),
      ),
    );
  }
}
Dart

7. bottomNavigationBar

bottomNavigationBar是显示在脚手架底部的导航栏。在大多数使用情况下，它是BottomAppBar或BottomNativationBar的对象。

183557_12111

示例代码

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Scaffold Example'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child: Text('Hello World')
      ),
      bottomNavigationBar : BottomNavigationBar(
          currentIndex : 0,
          fixedColor  : Colors.green,
          items : [
            BottomNavigationBarItem(
              title  : Text("Home"),
              icon  : Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              title : Text("Search"),
              icon  : Icon(Icons.search),
            ),
            BottomNavigationBarItem(
              title  : Text("Profile"),
              icon  : Icon(Icons.account_circle),
            ),
          ],
          onTap  : (int indexOfItem) {

          }),
    );
  }
}
Dart

8. persistentFooterButtons

persistentFooterButtons是包裹在ButtonBar中并显示在支架底部的按钮列表。即使用户滚动支架的主体，它们也会持续显示。在大多数情况下，它们是TextButton。

List<Widget> persistentFooterButtons

//更多请阅读：https://www.yiibai.com/flutter/flutter-scaffold.html

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) *** 在线联系博主***
+1(323)529-5889

TeleGram联系

WhatsAPP联系

标签：

上一篇：

下一篇：

相关推荐

博客简介

本站CDN采用VmShell免费提供离中国大陆最近的香港CMI高速网络做支撑,ToToTel打造全球最快速的边沿网络支撑服务，具体详情请见 :https://vmshell.com/ 以及 https://tototel.com/,网站所有的文件和内容禁止大陆网站搬迁复制,谢谢,VPS营销投稿邮箱: admin@linuxxword.com，我们免费帮大家发布，不收取任何费用,请提供完整测试文稿!

最近更新

热门标签

news(120) soledad(120) VPS(63) vmshell(45) 安装(43) 美国(41) 搭建(36) 使用(36) linux(34) 日本(34) 如何(33) 教程(32) 服务器(30) 香港(23) 系统(22) 下载(21) 中国(21) tototel(20) GOOGLE(19) Wordpress(19) MYsql(18) 脚本(18) 免费(17) 台湾(17)

精彩评论

关于VmShell INC

VMSHELL INC 是一家成立于2021年的美国云计算服务公司,总部位于怀俄明州谢里丹,专注于提供全球数据中心的虚拟机服务器租赁和全球金融服务。 公司旗下品牌包括VmShell 和ToToTel,业务覆盖亚洲和美洲以及欧洲,致力于为外贸企业提供高效、稳定的网络解决方案。购买CMI香港服务器

站点统计

  • 文章总数： 3149 篇
  • 草稿数目： 0 篇
  • 分类数目： 9 个
  • 独立页面： 0 个
  • 评论总数： 3 条
  • 链接总数： 0 个
  • 标签总数： 48415 个
  • 注册用户： 139 人
  • 访问总量： 8,656,629 次
  • 最近更新： 2025年12月15日