Flutter Material 基本组件示例

Scaffold脚手架

Scaffold脚手架是整个 Material 应用的骨架。我们可以将其抽象成还未被填词的旋律。我们拿到它只需要构建内容就完全可以了。当然,发现提供的旋律不是我们想要的也可以将某一部分替换成其他的,甚至整套样式都不喜欢我们也可将默认的样式都替换。

scaffold构造函数的参数

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.start, bool extendBody = false, Color drawerScrimColor, double drawerEdgeDragWidth})

第一个Flutter 程序

这个例子中使用了 AppBar、BottomAppBar、FloatingActionButton、drawer

属性构造函数或类型
bodyWidget
appbar(导航栏)Widget
bottomNavigationBar(底部状态栏)BottomAppBar
floatingActionButton(悬浮按钮)floatingActionButton(悬浮按钮)
floatingActionButtonLocation(悬浮按钮位置)FloatingActionButtonLocation
drawer(侧边栏)Widget
import 'package:flutter/material.dart';

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



class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('这是第一个程序'),
        ),

        body: Center(child: Text('Hello World'),),

        bottomNavigationBar: BottomAppBar( // 底部导航栏
          child: Container(
            height: 70.0,
          ),
        ),

        floatingActionButton: FloatingActionButton(
          onPressed: (){}, // 点击事件
          child: Icon(Icons.add),
          tooltip: '增加',
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

        drawer: Icon(
          Icons.menu
        ),


      ),
    );
  } // function build() End
}

AppBar

首先要介绍的是 Scaffold 的参数AppBar。

appBar属性的参数类型为PreferredSizeWidget。构造函数是AppBar。

AppBar({Key key, Widget leading, bool automaticallyImplyLeading = true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation, ShapeBorder shape, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, IconThemeData actionsIconTheme, TextTheme textTheme, bool primary = true, bool centerTitle, double titleSpacing = NavigationToolbar.kMiddleSpacing, double toolbarOpacity = 1.0, double bottomOpacity = 1.0})

在material官网上我们可以看到这样的样式。只要在AppBar的属性写就可以在相应的位置补充内容。

Flutter AppBar 示例

import 'package:flutter/material.dart';

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



class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Layout(),
    );
  } // function build() End
}


class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.menu),

        title: Text('AppBar'),

        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: '搜索',
            onPressed: (){},
          ),
          
          IconButton(
            icon: Icon(Icons.add),
            tooltip: '添加',
            onPressed: (){},
          ),
        ],
      ),

      body: Text('appbar 示例'),
    );
  }
}

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注