flutter scaffold widget应用

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

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',
          )
      ),
    );
  }
}

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

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',
      )
  ),
);

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),
      ),
    );
  }
}

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,
);

指定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

5. 抽屉

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

Widget drawer

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

https://www.yiibai.com/flutter/flutter-appbar.html

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'),
            ),
          ],
        ),
      ),
    );
  }
}

6. endDrawer

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

Widget endDrawer

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

https://www.yiibai.com/flutter/flutter-appbar.html

示例代码

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'),
            ),
          ],
        ),
      ),
    );
  }
}

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) {

          }),
    );
  }
}

8. persistentFooterButtons

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

List<Widget> persistentFooterButtons

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

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

赞(0) 打赏

标签：

flutter scaffold widget应用 flutter 脚手架

上一篇：企业微信Flutter与大型Native工程跨四端融合实践

下一篇：Netch客户端配置使用教程,网络游戏加速工具下载

博客简介

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

文章总数： 2591 篇
草稿数目： 22 篇
分类数目： 6 个
独立页面： 0 个
评论总数： 2 条
链接总数： 0 个
标签总数： 13021 个
注册用户： 139 人
访问总量： 8,650,925 次
最近更新： 2024年11月21日

flutter scaffold widget应用

1. Scaffold示例

2. floatingActionButton按钮

3. floatingActionButtonLocation

4. floatingActionButtonAnimator

5. 抽屉

6. endDrawer

7. bottomNavigationBar

8. persistentFooterButtons

相关推荐

博客简介

最近更新

随机文章

热门标签

精彩评论

友情链接

站点统计