Flutter-flutter基礎(chǔ)之組件基礎(chǔ)(八)

一、Stack Widget

Stack Widget 可以用來設(shè)置多個(gè)子 Widget 哆窿，這些子 Widget 以堆疊的方式進(jìn)行排列叭喜。Stack 的子 Widget 可以分為已定位和未定位跨晴，定位使用 Positioned Widget 配合 Stack 一起使用鸦难。Stack 本身的大小將包含所有未定位的子 Widget 根吁，這些子 Widget 根據(jù)對(duì)齊方式定位(在從左到右的環(huán)境中，默認(rèn)為左上角合蔽，在從右到左的環(huán)境中击敌，默認(rèn)為右上角)。然后根據(jù)已定位的子 Widget 的上拴事、右沃斤、下、左的屬性相對(duì)于 Stack 放置它們刃宵。

Stack 的構(gòu)造方法如下：

Stack({
  Key key,
  //AlignmentGeometry類型可選命名參數(shù)轰枝，如何對(duì)齊Stack中未定位和部分定位的子Widget
  //使用AlignmentDirectional
  this.alignment = AlignmentDirectional.topStart,
  //TextDirection類型可選命名參數(shù)，文本對(duì)齊方向設(shè)置
  this.textDirection,
  //StackFit類型可選命名參數(shù)组去，如何調(diào)整Stack中未定位的子Widget
  this.fit = StackFit.loose,
  //Overflow類型可選命名參數(shù)，設(shè)置溢出部分如何剪裁
  this.overflow = Overflow.clip,
  //List<Widget>類型可選命名參數(shù)步淹，要顯示的Widget
  List<Widget> children = const <Widget>[],
})

AlignmentDirectional 用于設(shè)置如何對(duì)齊 Stack 中未定位和部分定位的子 Widget 从隆。對(duì)于未定位的子 Widget 項(xiàng)彼此相對(duì)放置，以使通過對(duì)齊確定的點(diǎn)位于同一位置缭裆。部分定位的子 Widget 指的是未在特定軸上指定對(duì)齊方式的子 Widget 键闺，使用對(duì)齊方式來確定應(yīng)如何在未指定的軸上定位它們。AlignmentDirectional 的構(gòu)造方法如下：

//兩個(gè)參數(shù)均為double類型
const AlignmentDirectional(this.start, this.y)

可以使用構(gòu)造方法設(shè)置澈驼，也可以直接使用提供好的位置靜態(tài)屬性辛燥，如下：

/// The top corner on the "start" side.
static const AlignmentDirectional topStart = AlignmentDirectional(-1.0, -1.0);
/// The center point along the top edge.
///
/// Consider using [Alignment.topCenter] instead, as it does not need
/// to be [resolve]d to be used.
static const AlignmentDirectional topCenter = AlignmentDirectional(0.0, -1.0);
/// The top corner on the "end" side.
static const AlignmentDirectional topEnd = AlignmentDirectional(1.0, -1.0);
/// The center point along the "start" edge.
static const AlignmentDirectional centerStart = AlignmentDirectional(-1.0, 0.0);
/// The center point, both horizontally and vertically.
///
/// Consider using [Alignment.center] instead, as it does not need to
/// be [resolve]d to be used.
static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);
/// The center point along the "end" edge.
static const AlignmentDirectional centerEnd = AlignmentDirectional(1.0, 0.0);
/// The bottom corner on the "start" side.
static const AlignmentDirectional bottomStart = AlignmentDirectional(-1.0, 1.0);
/// The center point along the bottom edge.
///
/// Consider using [Alignment.bottomCenter] instead, as it does not
/// need to be [resolve]d to be used.
static const AlignmentDirectional bottomCenter = AlignmentDirectional(0.0, 1.0);
/// The bottom corner on the "end" side.
static const AlignmentDirectional bottomEnd = AlignmentDirectional(1.0, 1.0);

位置屬性簡單易懂，不做中文說明了缝其。AlignmentDirectional 的設(shè)置與 TextDirection 是關(guān)系的挎塌，對(duì)于不同的環(huán)境方向，AlignmentDirectional 的起始位置也不同内边。

StackFit 用于設(shè)置如何調(diào)整Stack中未定位的子 Widget 榴都，其是一個(gè)枚舉類型值，如下：

enum StackFit {
  //從其父級(jí)傳遞到Stack的約束被放寬了
  //例如：如果Stack具有強(qiáng)制其為350x600的約束漠其，那么這將允許Stack的未定位子Widget
  //具有從0到350的任何寬度和從0到600的任何高度
  loose,

  //從其父級(jí)傳遞到Stack的約束被收緊到允許的最大大小嘴高。
  //例如：如果Stack具有寬度在10到100范圍內(nèi)、高度在0到600范圍內(nèi)的松散約束和屎，則Stack中未
  //定位的子級(jí)的大小都將為100像素寬拴驮、600像素高
  expand,

  //從其父級(jí)傳遞到Stack的約束未修改地傳遞到未定位的子級(jí)
  //例如：如果Stack是行的擴(kuò)展子級(jí)，則水平約束將是緊的柴信，而垂直約束將是松的
  passthrough,
}

Stack 的使用方式如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        width: 500,
        height: 200,
        color: Colors.yellow,
        child:Stack(              //Stack
          alignment: AlignmentDirectional.topStart,
          textDirection: TextDirection.ltr,
          fit: StackFit.loose,
          overflow: Overflow.clip,
          children: <Widget>[
            Image.network("http://www.mwpush.com/uploads/avatar.png"),
            Text("Stack1", style: TextStyle(color: Colors.blue, fontSize: 30),),
            Text("Stack2",style: TextStyle(color: Colors.red, fontSize: 20),),
          ],
        ),
      ),
    );
  }
}

效果如下：


2020324102.jpg

定位 Widget 使用 Positioned 套啤，用于控制 Stack 的子 Widget 的位置。如果一個(gè) Widget 包裝在 Positioned 中颠印，那么這個(gè) Widget 就是 Stack 中的一個(gè)定位 Widget 纲岭。如果單獨(dú)設(shè)置 top 則表示該子 Widget 距離 Stack 頂部的距離抹竹，同時(shí)設(shè)定 top 和 bottom 則子 Widget 會(huì)根據(jù)設(shè)置調(diào)整子 Widget 的高度以使其滿足頂部和底部的距離，左右也是一樣止潮。其中 top 窃判、bottom 和 height 只能同時(shí)設(shè)置其中的兩項(xiàng)，另外一項(xiàng)必須為空喇闸，如果都為空袄琳，則使用 Stack 的 alignment 在垂直方向進(jìn)行定位。 left 燃乍、right 和 width 也只能設(shè)置其中兩項(xiàng)唆樊，另外一項(xiàng)必須為空，如果所有都為空刻蟹，則使用 Stack 的 alignment 在水平方向進(jìn)行定位逗旁。

Positioned 的構(gòu)造方法如下：

const Positioned({
  Key key,
  //double類型可選命名參數(shù)，子Widget底部距離Stack左邊的距離
  this.left,
  //double類型可選命名參數(shù)舆瘪，子Widget底部距離Stack頂部的距離
  this.top,
  //double類型可選命名參數(shù)片效，子Widget底部距離Stack右邊的距離
  this.right,
  //double類型可選命名參數(shù)，子Widget底部距離Stack底部的距離
  this.bottom,
  //double類型可選命名參數(shù)英古，子Widget的寬度
  this.width,
  //double類型可選命名參數(shù)淀衣，子Widget的高度
  this.height,
  //Widget類型必傳參數(shù)，要顯示的Widget
  @required Widget child,
})

使用方法如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        width: 500,
        height: 200,
        color: Colors.yellow,
        child:Stack(              //Stack
          alignment: AlignmentDirectional.topStart,
          textDirection: TextDirection.ltr,
          fit: StackFit.loose,
          overflow: Overflow.clip,
          children: <Widget>[
            Image.network("http://www.mwpush.com/uploads/avatar.png"),
            Positioned(             //Positioned
              bottom: 10,
              top: 20,
              left: 120,
              width: 100,
              child: Container(child: Text("Stack1", style: TextStyle(color: Colors.blue, fontSize: 30,), ), color: Colors.red,),
            ),
            Text("Stack2",style: TextStyle(color: Colors.red, fontSize: 20),),
          ],
        ),
      ),
    );
  }
}

效果如下：


2020324208.jpg

二召调、IndexedStack Widget

Stack 可以顯示一組 Widget 膨桥，IndexedStack 繼承自 Stack ，用于選擇性的只顯示一組 Widget 中的一個(gè)唠叛。要顯示的 Widget 通過 index 索引設(shè)置只嚣，編號(hào)從 0 開始。IndexedStack 的大小總是和一組 Widget 中的最大的 Widget 一樣大艺沼。構(gòu)造方法如下：

IndexedStack({
  Key key,
  //AlignmentGeometry類型可選命名參數(shù)介牙，如何對(duì)齊Stack中未定位和部分定位的子Widget
  //使用AlignmentDirectional
  AlignmentGeometry alignment = AlignmentDirectional.topStart,
  //TextDirection類型可選命名參數(shù)，文本對(duì)齊方向設(shè)置
  TextDirection textDirection,
  //StackFit類型可選命名參數(shù)澳厢，如何調(diào)整Stack中未定位的子Widget
  StackFit sizing = StackFit.loose,
  //int類型可選參數(shù)环础，要顯示的Widget
  this.index = 0,
  //List<Widget>類型可選命名參數(shù)，要顯示的Widget
  List<Widget> children = const <Widget>[],
})

IndexedStack 只比 Stack 多了一個(gè) index 屬性剩拢，其他屬性相同线得，默認(rèn)顯示 Widget 列中的第一個(gè) Widget ，下標(biāo)為 0 徐伐。IndexedStack 使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        width: 500,
        height: 200,
        color: Colors.yellow,
        child:IndexedStack(              //IndexedStack
          alignment: AlignmentDirectional.topStart,
          textDirection: TextDirection.ltr,
          sizing: StackFit.loose,
          index: 2,       //要顯示的Widget的下標(biāo)
          children: <Widget>[
            Image.network("http://www.mwpush.com/uploads/avatar.png"),
            Positioned(
              bottom: 10,
              top: 20,
              left: 120,
              width: 100,
              child: Container(child: Text("Stack1", style: TextStyle(color: Colors.blue, fontSize: 30,), ), color: Colors.red,),
            ),
            Text("Stack2",style: TextStyle(color: Colors.red, fontSize: 20),),
          ],
        ),
      ),
    );
  }
}

三贯钩、SizedBox Widget

SizedBox 是設(shè)置固定尺寸的 Widget ，如果設(shè)置了寬高，則子 Widget 會(huì)被強(qiáng)制為 SizedBox 的尺寸角雷，如果不設(shè)置寬高祸穷，則 SizedBox 的尺寸將與子 Widget 相同。 如果沒有給定子 Widget 勺三，SizedBox 將嘗試在給定父對(duì)象約束的情況下雷滚，將自身的大小調(diào)整到盡可能接近指定的高度和寬度。如果高度或?qū)挾葹榭栈蛭粗付鸺幔瑢⒈灰暈榱恪?/p>

有以下幾個(gè)構(gòu)造方法：

//創(chuàng)建固定尺寸的SizedBox祈远，寬高可以為空，此時(shí)表示大小不受限制
const SizedBox({
  Key key, 
  //double類型可選命名參數(shù)商源，設(shè)置SizedBox的寬度车份，子Widget也會(huì)具有此寬度
  this.width, 
  //double類型可選命名參數(shù)，設(shè)置SizedBox的高度牡彻，子Widget也會(huì)具有此高度
  this.height, 
  //Widget類型可選命名參數(shù)扫沼，要顯示的Widget
  Widget child
})
  
//創(chuàng)建一個(gè)將變得與其父級(jí)允許一樣大的SizedBox，等效于將width和height設(shè)置為double.infinity
const SizedBox.expand({
  Key key, 
  //Widget類型可選命名參數(shù)庄吼，要顯示的Widget
  Widget child 
})
 
//創(chuàng)建一個(gè)將變得盡可能小的SizeBox
const SizedBox.shrink({ 
  Key key, 
  //Widget類型可選命名參數(shù)充甚，要顯示的Widget
  Widget child 
})

//創(chuàng)建一個(gè)指定尺寸的SizeBox
SizedBox.fromSize({ 
  Key key, 
  //Widget類型可選命名參數(shù)，要顯示的Widget
  Widget child, 
  //Size類型可選命名參數(shù)霸褒，設(shè)置SizedBox的尺寸，子Widget也具有此尺寸
  Size size
})

使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: SizedBox(
          height: 100,
          width: 300,
          child: Container(
            color: Colors.red,
            width: 10,
            height: 20,
          ),
      ),
    );
  }
}

這里的子 Widget 是 Container 盈蛮，雖然 Container 也設(shè)置了寬高废菱，但是沒有生效，其寬高與 SizedBox 相同抖誉。但是如果子 Widget 不能設(shè)置寬高屬性殊轴，則子 Widget 的大小不會(huì)與 SizedBox 設(shè)置的相同，但是會(huì)受其最大尺寸約束袒炉。上述代碼效果如下：

2020324330.jpg

四旁理、Flex Widget

Flex 使用一維數(shù)組來設(shè)置一組子 Widget ，其可以通過設(shè)置主軸的方向來控制水平或垂直顯示 Widget 我磁，它是上篇文章中介紹過的 Row 和 Column 的父類孽文。如果在使用前已知要顯示的 Widget 的方向，應(yīng)考慮使用 Row 或 Column 夺艰。

Flex 是一個(gè)不可以滾動(dòng)的 Widget 芋哭，當(dāng)要顯示的 Widget 超過可用范圍則會(huì)拋出異常。其構(gòu)造方法如下：

Flex({
  Key key,
  //Axis類型必傳參數(shù)郁副，設(shè)置主軸的方向(垂直或者水平)减牺，不設(shè)置會(huì)拋出異常
  @required this.direction,
  //MainAxisAlignment類型可選命名參數(shù)，如何沿著主軸放置子Widget
  this.mainAxisAlignment = MainAxisAlignment.start,
  //MainAxisSize類型可選命名參數(shù)，主軸上應(yīng)占用多少空間拔疚，該值傳入最大化還是最小化可用空間
  this.mainAxisSize = MainAxisSize.max,
  //CrossAxisAlignment類型可選命名參數(shù)肥隆，如何沿著次軸放置子Widget
  this.crossAxisAlignment = CrossAxisAlignment.center,
  //TextDirection類型可選命名參數(shù)，設(shè)置子Widget橫向的排列方向稚失，默認(rèn)為環(huán)境方向
  this.textDirection,
  //VerticalDirection類型可選命名參數(shù)栋艳，設(shè)置子Widget縱向的排列順序以及如何解釋垂直方向的開始和結(jié)束
  this.verticalDirection = VerticalDirection.down,
  //TextBaseline類型可選命名參數(shù)，果根據(jù)基線對(duì)齊項(xiàng)目墩虹，使用哪個(gè)基線
  this.textBaseline,
  //List<Widget>類型可選命名參數(shù)嘱巾，要顯示的Widgets
  List<Widget> children = const <Widget>[],
})

Axis 用于設(shè)置主軸的方向，即要顯示的 Widgets 的排列方向诫钓，是一個(gè)枚舉類型值旬昭，如下：

enum Axis {
  //水平排列
  horizontal,
  //垂直排列
  vertical,
}

其他屬性在上一篇文章做過說明，可查看上篇文章的 Row 部分菌湃。 Flex 的使用方式如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Text("Text1"),
          Text("Text2"),
          Text("Text3"),
          Text("Text4"),
          Text("Text5"),
        ],
      ),
    );
  }
}

五问拘、Expanded Widget

Expanded 是用來擴(kuò)展 Row 、Column 或 Flex 的子 Widget 惧所，其作用是按一定比例填充子 Widgets 間的可用空間骤坐。如果要擴(kuò)展多個(gè) Widget ，可以通過設(shè)置擴(kuò)展因子在可用空間進(jìn)行空間分配下愈。其構(gòu)造方法如下：

const Expanded({
  Key key,
  //int類型可選命名參數(shù)纽绍，擴(kuò)展因子  
  int flex = 1,
  //Widget類型必傳參數(shù)，要顯示的Widget 
  @required Widget child,  
})

使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            child: Container(child: Text("Text1"), color: Colors.red, height: 50,),
            flex: 1,
          ),
          Expanded(
            child: Container(child: Text("Text2"), color: Colors.blue, height: 50,),
            flex: 2,
          ),
          Expanded(
            child: Container(child: Text("Text3"), color: Colors.yellow, height: 50,),
            flex: 3,
          ),
        ],
      ),
    );
  }
}

效果如下：


2020324508.jpg

上面的代碼中設(shè)置了擴(kuò)展因子势似，是倍數(shù)關(guān)系拌夏，所以顯示的結(jié)果寬度也是倍數(shù)關(guān)系，如果是垂直排列 Widget 履因，則高度是倍數(shù)關(guān)系障簿。不設(shè)置擴(kuò)展因子則子 Widget 會(huì)平均分配可用空間。也可以單獨(dú)設(shè)置某個(gè)子 Widget 的擴(kuò)展因子栅迄。

六站故、Wrap Widget

Wrap 也可以顯示多個(gè)子 Widget ，其可以設(shè)置排列方向(水平或者垂直)顯示 Widgets 毅舆，與 Row 和 Column 的不同之處在于西篓，Row 和 Column 在可用空間無法顯示全部 Widget 時(shí)會(huì)拋出異常，而 Warp 顯示不下時(shí)會(huì)自動(dòng)換行憋活。

構(gòu)造方法如下：

Wrap({
  Key key,
  //Axis類型可選命名參數(shù)污淋，設(shè)置主軸的方向(垂直或者水平)
  this.direction = Axis.horizontal,
  //WrapAlignment類型可選命名參數(shù)，在主軸上如何排列子Widgets
  this.alignment = WrapAlignment.start,
  //double類型可選命名參數(shù)余掖，主軸上排列的每個(gè)Widget之間的間隙
  this.spacing = 0.0,
  //WrapAlignment類型可選命名參數(shù)寸爆，!!!沒有整明白此參數(shù)的作用礁鲁，使用也沒有看到效果
  this.runAlignment = WrapAlignment.start,
  //double類型可選命名參數(shù)，如果是橫向排列則是每行之間的間距赁豆，縱向排列則是每列之間的間距
  this.runSpacing = 0.0,
  //WrapCrossAlignment類型可選命名參數(shù)仅醇，如何沿著次軸放置子Widget
  this.crossAxisAlignment = WrapCrossAlignment.start,
  //TextDirection類型可選命名參數(shù)，設(shè)置子Widget橫向的排列方向魔种，默認(rèn)為環(huán)境方向
  this.textDirection,
  //VerticalDirection類型可選命名參數(shù)析二，設(shè)置子Widget縱向的排列順序以及如何解釋垂直方向的開始和結(jié)束
  this.verticalDirection = VerticalDirection.down,
  //List<Widget>類型可選命名參數(shù)，要顯示的Widgets
  List<Widget> children = const <Widget>[],
})

使用如下

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        color: Colors.amber,
        child: Wrap(                        //Wrap
          direction: Axis.horizontal,
          textDirection: TextDirection.ltr,
          alignment: WrapAlignment.center,
          crossAxisAlignment: WrapCrossAlignment.end,
          spacing: 10,
          runSpacing: 20,
          runAlignment: WrapAlignment.center,

          children: <Widget>[
            Container(child: Text("Text1"), color: Colors.red, height: 100, width: 50,),
            Container(child: Text("Text2"), color: Colors.red, height: 50, width: 100,),
            Container(child: Text("Text3"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text4"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text5"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text6"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text7"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text8"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text9"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text10"), color: Colors.red, height: 50, width: 50,),
            Container(child: Text("Text11"), color: Colors.red, height: 30, width: 120,),
          ],
        ),
      )
    );
  }
}

效果如下：


2020325953.jpg

七节预、FittedBox Widget

FittedBox 用于管理子 Widget 在其父級(jí) Widget 如何對(duì)齊和縮放叶摄。構(gòu)造方法如下：

const FittedBox({
  Key key,
  //BoxFit類型可選命名參數(shù)，如何適配子Widget
  this.fit = BoxFit.contain,
  //AlignmentGeometry類型可選命名參數(shù)安拟，如何在父級(jí)范圍內(nèi)對(duì)齊子Widget蛤吓，使用Alignment
  this.alignment = Alignment.center,
  //Widget類型可選命名參數(shù)，要顯示的Widget
  Widget child,
})

使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        color: Colors.yellow,
        height: 200,
        width: 400,
        child: FittedBox(
          fit: BoxFit.fitHeight,
          alignment: Alignment.topLeft,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
            child: Image.network("http://www.mwpush.com/uploads/avatar.png"),
          ),
        ),
      )
    );
  }
}

BoxFit 的設(shè)置和樣式可以查看官網(wǎng)糠赦，地址為：https://api.flutter.dev/flutter/painting/BoxFit-class.html 会傲。

上述代碼效果如下：


20203241037.jpg

八、OverflowBox Widget

通常拙泽，當(dāng)一個(gè)子 Widget 在 父 Widget 中時(shí)淌山，子 Widget 是受父 Widget 的約束限制的，超出父 Widget 的部分一般會(huì)被截掉顾瞻。如果想子 Widget 不受父 Widget 的限制泼疑，可以使用 OverflowBox ，它是一個(gè)溢出 Widget 荷荤，可以使用與父 Widget 不同的約束退渗。其構(gòu)造方法如下：

const OverflowBox({
  Key key,
  //AlignmentGeometry類型可選命名參數(shù)，如何在父級(jí)范圍內(nèi)對(duì)齊子Widget梅猿，使用Alignment
  this.alignment = Alignment.center,
  //double類型可選命名參數(shù)，最小寬度秒裕，不設(shè)置(默認(rèn)值)袱蚓，使用父級(jí)約束
  this.minWidth,
  //double類型可選命名參數(shù)，最大寬度几蜻，不設(shè)置(默認(rèn)值)喇潘，使用父級(jí)約束
  this.maxWidth,
  //double類型可選命名參數(shù)，最小高度梭稚，不設(shè)置(默認(rèn)值)颖低，使用父級(jí)約束
  this.minHeight,
  //double類型可選命名參數(shù)，最大高度弧烤，不設(shè)置(默認(rèn)值)忱屑，使用父級(jí)約束
  this.maxHeight,
  //Widget類型可選命名參數(shù)，要顯示的Widget
  Widget child,
})

使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        color: Colors.yellow,
        height: 200,
        width: 400,
        child: OverflowBox(             //OverflowBox
          minHeight: 100,   
          maxHeight: 300,
          minWidth: 100,
          maxWidth: 300,
          alignment: Alignment.topRight,
          child: Container(
            color: Colors.red,
          ),
        ),
      )
    );
  }
}

效果如下：


2020325929.jpg

九、Offstage Widget

在開發(fā)中莺戒，有時(shí)候需要根據(jù)需要來對(duì)某個(gè) Widget 進(jìn)行顯示或隱藏伴嗡，就可以使用 Offstage 。當(dāng) Offstage 設(shè)置為隱藏時(shí)从铲，其不接收任何事件瘪校，也不占用父級(jí)的任何空間。但如果在 Offstage 中有動(dòng)畫執(zhí)行名段，即便其為隱藏狀態(tài)阱扬，動(dòng)畫都會(huì)在后臺(tái)繼續(xù)執(zhí)行，會(huì)消耗電量和 CPU 伸辟。其構(gòu)造方法如下：

const Offstage({
  Key key, 
  //bool類型可選命名參數(shù)麻惶，是否隱藏子Widget
  this.offstage = true, 
  //Widget類型可選命名參數(shù)，要顯示或隱藏的Widget
  Widget child 
})

使用如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("HomePage"),
      ),
      body: Container(
        color: Colors.yellow,
        height: 200,
        width: 400,
        child:  Offstage(                   //Offstage
          offstage: false,       //當(dāng)設(shè)置為true時(shí)自娩，在界面上不會(huì)顯示Text
          child: Text("Offstage"),
        )
      )
    );
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末用踩，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子忙迁，更是在濱河造成了極大的恐慌脐彩，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,126評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件姊扔，死亡現(xiàn)場離奇詭異惠奸，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)恰梢，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門佛南，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人嵌言，你說我怎么就攤上這事嗅回。” “怎么了摧茴？”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵绵载，是天一觀的道長。 經(jīng)常有香客問我苛白，道長娃豹，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1贊 278
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任购裙，我火速辦了婚禮懂版，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘躏率。我一直安慰自己躯畴，他們只是感情好民鼓，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著私股，像睡著了一般摹察。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上倡鲸，一...
    開封第一講書人閱讀 48,970評(píng)論 1贊 284
  • 城市分裂傳說
    那天供嚎，我揣著相機(jī)與錄音，去河邊找鬼峭状。 笑死克滴，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的优床。 我是一名探鬼主播劝赔，決...
    沈念sama閱讀 38,276評(píng)論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼胆敞！你這毒婦竟也來了着帽？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 36,927評(píng)論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤移层，失蹤者是張志新（化名）和其女友劉穎仍翰，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體观话，經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡予借，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了频蛔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灵迫。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖晦溪，靈堂內(nèi)的尸體忽然破棺而出瀑粥，到底是詐尸還是另有隱情，我是刑警寧澤三圆，帶...
    沈念sama閱讀 33,646評(píng)論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布狞换，位于F島的核電站，受9級(jí)特大地震影響嫌术，放射性物質(zhì)發(fā)生泄漏哀澈。R本人自食惡果不足惜牌借，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一度气、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧膨报，春花似錦磷籍、人聲如沸适荣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0贊 19
  • 一樁弒父案院领，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽弛矛。三九已至，卻和暖如春比然，著一層夾襖步出監(jiān)牢的瞬間丈氓，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1贊 260
  • 情欲美人皮
    我被黑心中介騙來泰國打工强法， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留万俗，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2贊 352
  • 代替公主和親
    正文 我出身青樓饮怯，卻偏偏與公主長得像闰歪，于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蓖墅，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345