Flutter Scaffold 控件介绍

一、使用方法

//脚手架
Scaffold({
    Key key,
    this.appBar,//设置应用栏，显示在脚手架顶部
    this.body,//设置脚手架内容区域控件
    this.floatingActionButton,//设置显示在上层区域的按钮，默认位置位于右下角
    this.floatingActionButtonLocation,//设置floatingActionButton的位置
    this.floatingActionButtonAnimator,//floatingActionButtonAnimator 动画 动画，但是设置了没有效果？
    this.persistentFooterButtons,//一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)
    this.drawer,//设置左边侧边栏
    this.endDrawer,//设置右边侧边栏
    this.bottomNavigationBar,//设置脚手架 底部导航栏
    this.bottomSheet,//底部抽屉栏
    this.backgroundColor,//设置脚手架内容区域的颜色
    this.resizeToAvoidBottomPadding = true,// ? 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
    this.primary = true,//脚手架是否显示在最低部
  })

二、常用属性

设置应用栏，显示在脚手架顶部

      appBar: AppBar(
        title: Text('Sample Code'),
      )

2.设置脚手架内容区域控件

body: Column(
        children: <Widget>[
          Text('You have pressed the button $_count times.'),
          TextField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.text_fields),
              labelText: '请输入你的姓名)',
              helperText: '请输入你的真实姓名',
            ),
            autofocus: false,
          ),
        ],
      ),

3.设置显示在上层区域的按钮，默认位置位于右下角

      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
          showModalBottomSheet(context: context, builder: (BuildContext context){
            return new Container(
              height: 500,
              width: 200,
              child: new Image.network("https://flutter.io/images/homepage/header-illustration.png"),
            );
          });
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),

4.设置floatingActionButton的位置

    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked

5.floatingActionButtonAnimator 动画

    floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling

6.一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)

    persistentFooterButtons:_footerButton

7.设置左边侧边栏

    drawer:MyDrawer(title: '左边',)

8.设置右边侧边栏

    endDrawer:MyDrawer(title: '右边',)

设置脚手架底部导航栏

    bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      )

底部抽屉

    bottomSheet:BottomSheet(
          onClosing: (){
//            print("bottomSheet onClosing");
          }, builder: (BuildContext context) {
        return Container(
          height: 50,
          width: 50,
          child: Image(image: NetworkImage("http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg")),
        );
      }
      )

设置脚手架内容区域的颜色

    backgroundColor: Colors.yellow

? 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容

    resizeToAvoidBottomPadding:true

脚手架是否显示在最低部

    primary: false

三、一个完整的例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Text Demo'),
    );
  }
}

//      //脚手架
//      Scaffold({
//      Key key,
//      this.appBar,//设置应用栏，显示在脚手架顶部
//      this.body,//设置脚手架内容区域控件
//      this.floatingActionButton,//设置显示在上层区域的按钮，默认位置位于右下角
//      this.floatingActionButtonLocation,//设置floatingActionButton的位置
//      this.floatingActionButtonAnimator,//设置floatingActionButton 动画，但是设置了没有效果？
//      this.persistentFooterButtons,//一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)
//      this.drawer,//设置左边侧边栏
//      this.endDrawer,//设置右边侧边栏
//      this.bottomNavigationBar,//设置脚手架 底部导航栏
//      this.bottomSheet,//底部抽屉栏
//      this.backgroundColor,//设置脚手架内容区域的颜色
//      this.resizeToAvoidBottomPadding = true,// ? 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
//      this.primary = true,//脚手架是否显示在最低部
//      })

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage>{
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    var _footerButton = List<Widget>();
    _footerButton..add(
        Icon(Icons.accessibility_new,color: Colors.red,size: 40),
    )..add(
      Icon(Icons.ac_unit,color: Colors.blue,size: 80,)
    )..add(
        Icon(Icons.account_balance,color: Colors.green,size: 50,)
    );
    return Scaffold(
      //1.设置应用栏，显示在脚手架顶部
      appBar: AppBar(
        title: Text('Sample Code'),
      ),
      //2.设置脚手架内容区域控件
      body: Column(
        children: <Widget>[
          Text('You have pressed the button $_count times.'),
          TextField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.text_fields),
              labelText: '请输入你的姓名)',
              helperText: '请输入你的真实姓名',
            ),
            autofocus: false,
          ),
        ],
      ),
      //3.设置显示在上层区域的按钮，默认位置位于右下角
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
          showModalBottomSheet(context: context, builder: (BuildContext context){
            return new Container(
              height: 500,
              width: 200,
              child: new Image.network("https://flutter.io/images/homepage/header-illustration.png"),
            );
          });
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      //4.设置floatingActionButton的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      //5.floatingActionButtonAnimator 动画
      floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling ,
      //6.一组显示在脚手架底部的按钮(在bottomNavigationBar底部导航栏的上面)
      persistentFooterButtons:_footerButton,
      //7.设置左边侧边栏
      drawer:MyDrawer(title: '左边',),
      //8.设置右边侧边栏
      endDrawer:MyDrawer(title: '右边',) ,
      //9. 设置脚手架 底部导航栏
      bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      ),
      //10. 底部抽屉
      bottomSheet:BottomSheet(
          onClosing: (){
//            print("bottomSheet onClosing");
          }, builder: (BuildContext context) {
        return Container(
          height: 50,
          width: 50,
          child: Image(image: NetworkImage("http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg")),
        );
      }
      ),
      //11. 设置脚手架内容区域的颜色
      backgroundColor: Colors.yellow,
      //12. ? 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
      resizeToAvoidBottomPadding:true,
      //13. 脚手架是否显示在最低部
      primary: false,


    );
  }
}

class MyDrawer extends StatefulWidget {
  MyDrawer({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _Drawer createState() => _Drawer();
}

class _Drawer extends State<MyDrawer>{
  var netImageUrl1 = "http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg";
  var netImageUrl2 = "https://flutter.io/images/homepage/header-illustration.png";
  var localImageUrl = "images/2.0x/treasure_default_card.png";
  var fileTest = "/storage/emulated/0/cache/111.png";


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[
            //从新建的image文件中获取
            Image.asset(localImageUrl),
            //加载网络图片
            Image.network(netImageUrl2),
            // 本地文件图片
//              Image.file(File(fileTest)),
            //使用ImageProvider加载图片
            Image(image: NetworkImage(netImageUrl1),),
            Image(
              width: 100,
              height: 100,
              image: AssetImage(localImageUrl),
            ),
            Image(
              //设置imageProvider
              image: AssetImage(localImageUrl),
              //设置图像在宽高范围内的对齐方式
              alignment: Alignment.bottomLeft,
              //设置边缘裁剪形式
//                centerSlice: Rect.fromLTWH(20, 20, 100, 100),
//                centerSlice: Rect.fromLTRB(100, 100, 100, 100),
              //color 与 colorBlendMode 结合使用，用于颜色与每个图像像素混合
              color: Colors.greenAccent,
              colorBlendMode: BlendMode.exclusion,
              // ? 图像过滤器的质量级别
              filterQuality: FilterQuality.high,
              //绘制图像未覆盖的布局边界的任何部分
//                repeat:ImageRepeat.repeat,
//                repeat:ImageRepeat.repeatY,
//                repeat:ImageRepeat.repeatX,
              //设置宽高
              width: 300,
              height: 300,
              //设置图片怎么分布到对应的宽高中
              fit: BoxFit.fill,
            )

          ],

        ),
      ),
    );
  }
}

Flutter 系列文章：Flutter Scaffold 控件介绍

Flutter Scaffold 控件介绍

一、使用方法

二、常用属性

三、一个完整的例子