Flutter 系列文章：Flutter Scaffold 控制元件介紹

sometime-rock發表於2019-03-19
Flutter控制元件

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,//腳手架是否顯示在最低部
  })
複製程式碼

二、常用屬性

  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: '右邊',)
複製程式碼
  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
複製程式碼

三、一個完整的例子

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

          ],

        ),
      ),
    );
  }
}



複製程式碼

相關文章