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

时间  2019-11-06
标签 flutter 系列 文章 scaffold 控件 介绍 繁體版
原文   原文链接

Flutter Scaffold 控件介绍

1、使用方法

//脚手架
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,//脚手架是否显示在最低部
  })
复制代码

2、经常使用属性

  1. 设置应用栏，显示在脚手架顶部
appBar: AppBar(
        title: Text('Sample Code'),
      )
复制代码

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

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的位置app

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
复制代码

5.floatingActionButtonAnimator 动画less

floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling
复制代码

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

persistentFooterButtons:_footerButton
复制代码

7.设置左边侧边栏布局

drawer:MyDrawer(title: '左边',)
复制代码

8.设置右边侧边栏动画

endDrawer:MyDrawer(title: '右边',)
复制代码
  1. 设置脚手架 底部导航栏
bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      )
复制代码
  1. 底部抽屉
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")),
        );
      }
      )
复制代码
  1. 设置脚手架内容区域的颜色
backgroundColor: Colors.yellow
复制代码
  1. ? 控制界面内容 body 是否从新布局来避免底部被覆盖，好比当键盘显示的时候，从新布局避免被键盘盖住内容
resizeToAvoidBottomPadding:true
复制代码
  1. 脚手架是否显示在最低部
primary: false
复制代码

3、一个完整的例子

image 

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

          ],

        ),
      ),
    );
  }
}



复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程