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教程