国产成人色在线,亚洲天堂人妻

老孟導(dǎo)讀：Flutter中有這么一類(lèi)組件，用于定位、裝飾、控制子組件，比如 Container (定位、裝飾)、Expanded (擴(kuò)展)、SizedBox (固定尺寸)、AspectRatio (寬高比)、FractionallySizedBox (占父組件比例)。這些組件的使用頻率非常高，下面一一介紹，最后給出項(xiàng)目中實(shí)際案例熟悉其用法。
【Flutter實(shí)戰(zhàn)】系列文章地址：http://laomengit.com/guide/introduction/mobile_system.html

Container

Container 是最常用的組件之一，它是單容器類(lèi)組件，即僅能包含一個(gè)子組件，用于裝飾和定位子組件，例如設(shè)置背景顏色、形狀等。

最簡(jiǎn)單的用法如下：

Container(
    child: Text('老孟'),
 )

子組件不會(huì)發(fā)生任何外觀(guān)上的變化：

設(shè)置背景顏色：

Container(
    color: Colors.blue,
    child: Text('老孟'),
)

設(shè)置內(nèi)邊距( padding ) 和外邊距( margin )

Container(
      color: Colors.blue,
      child: Container(
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(20),
        color: Colors.red,
        child: Text('老孟'),
      ),
    )

效果如下：

decoration 屬性設(shè)置子組件的背景顏色、形狀等。設(shè)置背景為圓形，顏色為藍(lán)色：

Container(
  child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)

默認(rèn)情況下，圓形的直徑等于 Container 窄邊長(zhǎng)度，相當(dāng)于在矩形內(nèi)繪制內(nèi)切圓。

上面的情況明顯不是我們希望看到了，希望背景是圓角矩形：

Container(
        child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.blue),
      )

除了背景我們可以設(shè)置邊框效果，代碼如下：

Container(
        child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ),
        ),
      )

創(chuàng)建圓角圖片和圓形圖片：

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image:  DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
    )

修改其形狀為圓形，代碼如下：

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        shape: BoxShape.circle,
      ),
    )

設(shè)置對(duì)齊方式為居中，背景色為藍(lán)色，代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，一個(gè)有態(tài)度的程序員'),
        alignment: Alignment.center,
      )

注意：設(shè)置對(duì)齊方式后，Container將會(huì)充滿(mǎn)其父控件，相當(dāng)于A(yíng)ndroid中 match_parent 。

Alignment 已經(jīng)封裝了常用的位置，

通過(guò)名字就知道其位置，這里要介紹一下其他的位置，比如在距離左上角1/4處：

Container(
  alignment: Alignment(-.5,-.5),
  child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
)

所以這里有一個(gè)非常重要的坐標(biāo)系，Alignment 坐標(biāo)系如下：

組件的中心為坐標(biāo)原點(diǎn)。

設(shè)置固定的寬高屬性：

Container(
        color: Colors.blue,
        child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
      )

通過(guò) constraints 屬性設(shè)置最大/小寬、高來(lái)確定大小，如果不設(shè)置，默認(rèn)最小寬高是0，最大寬高是無(wú)限大（double.infinity），約束width代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        alignment: Alignment.center,
        constraints: BoxConstraints(
          maxHeight: 100,
          maxWidth: 300,
          minHeight: 100,
          minWidth: 100,
        ),
      )

通過(guò)transform可以旋轉(zhuǎn)、平移、縮放Container，旋轉(zhuǎn)代碼如下：

Container(
        color: Colors.blue,
        child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        alignment: Alignment.center,
        height: 60,
        width: 250,
        transform: Matrix4.rotationZ(0.5),
      )

注意：Matrix4.rotationZ()參數(shù)的單位是弧度而不是角度

SizedBox

SizedBox 是具有固定寬高的組件，直接指定具體的寬高，用法如下：

SizedBox(
        height: 60,
        width: 200,
        child: Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
        ),
      )

設(shè)置尺寸無(wú)限大，如下：

SizedBox(
  height: double.infinity,
  width: double.infinity,
  ...
)

雖然設(shè)置了無(wú)限大，子控件是否會(huì)無(wú)限長(zhǎng)呢？不，不會(huì)，子控件依然會(huì)受到父組件的約束，會(huì)擴(kuò)展到父組件的尺寸，還有一個(gè)便捷的方式設(shè)置此方式：

SizedBox.expand(
  child: Text('老孟，專(zhuān)注分享Flutter技術(shù)及應(yīng)用'),
)

SizedBox 可以沒(méi)有子組件，但仍然會(huì)占用空間，所以 SizedBox 非常適合控制2個(gè)組件之間的空隙，用法如下：

Column(
          children: <Widget>[
            Container(height: 30,color: Colors.blue,),
            SizedBox(height: 30,),
            Container(height: 30,color: Colors.red,),
          ],
        )

AspectRatio

AspectRatio 是固定寬高比的組件，用法如下：

Container(
        height: 300,
        width: 300,
        color: Colors.blue,
        alignment: Alignment.center,
        child: AspectRatio(
          aspectRatio: 2 / 1,
          child: Container(color: Colors.red,),
        ),
      )

aspectRatio 是寬高比，可以直接寫(xiě)成分?jǐn)?shù)的形式，也可以寫(xiě)成小數(shù)的形式，但建議寫(xiě)成分?jǐn)?shù)的形式，可讀性更高。效果如下：

FractionallySizedBox

FractionallySizedBox 是一個(gè)相對(duì)父組件尺寸的組件，比如占父組件的70%：

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  child: FractionallySizedBox(
    widthFactor: .8,
    heightFactor: .3,
    child: Container(
      color: Colors.red,
    ),
  ),
)

通過(guò) alignment 參數(shù)控制子組件顯示的位置，默認(rèn)為居中，用法如下：

FractionallySizedBox(
  alignment: Alignment.center,
  ...
)

權(quán)重組件

Expanded、Flexible 和 Spacer 都是具有權(quán)重屬性的組件，可以控制 Row、Column、Flex 的子控件如何布局的組件。

Flexible 組件可以控制 Row、Column、Flex 的子控件占滿(mǎn)父組件，比如，Row 中有3個(gè)子組件，兩邊的寬是100，中間的占滿(mǎn)剩余的空間，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

還是有3個(gè)子組件，第一個(gè)占1/6，第二個(gè)占2/6，第三個(gè)占3/6，代碼如下：

Column(
      children: <Widget>[
        Flexible(
          flex: 1,
          child: Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Text('2 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
        Flexible(
          flex: 3,
          child: Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: Text('3 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
          ),
        ),
      ],
    )

子組件占比 = 當(dāng)前子控件 flex / 所有子組件 flex 之和。

Flexible中 fit 參數(shù)表示填滿(mǎn)剩余空間的方式，說(shuō)明如下：

tight：必須（強(qiáng)制）填滿(mǎn)剩余空間。
loose：盡可能大的填滿(mǎn)剩余空間，但是可以不填滿(mǎn)。

這2個(gè)看上去不是很好理解啊，什么叫盡可能大的填滿(mǎn)剩余空間？什么時(shí)候填滿(mǎn)？看下面的例子：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
              child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

這段代碼是在最上面代碼的基礎(chǔ)上給中間的紅色Container添加了Text子控件，此時(shí)紅色Container就不在充滿(mǎn)空間，再給Container添加對(duì)齊方式，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
            child: Container(
              color: Colors.red,
              height: 50,
              alignment: Alignment.center,
              child: Text('Container',style: TextStyle(color: Colors.white),),
            )
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

此時(shí)又填滿(mǎn)剩余空間。

大家是否還記得 Container 組件的大小是如何調(diào)整的嗎？Container 默認(rèn)是適配子控件大小的，但當(dāng)設(shè)置對(duì)齊方式時(shí) Container 將會(huì)填滿(mǎn)父組件，因此是否填滿(mǎn)剩余空間取決于子組件是否需要填滿(mǎn)父組件。

如果把 Flexible 中子組件由 Container 改為 OutlineButton，代碼如下：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Flexible(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

OutlineButton 正常情況下是不充滿(mǎn)父組件的，因此最終的效果應(yīng)該是不填滿(mǎn)剩余空間：

下面再來(lái)介紹另一個(gè)權(quán)重組件 Expanded ，源代碼如下：

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Expanded 繼承字 Flexible，fit 參數(shù)固定為 FlexFit.tight，也就是說(shuō) Expanded 必須（強(qiáng)制）填滿(mǎn)剩余空間。上面的 OutlineButton 想要充滿(mǎn)剩余空間可以直接使用 Expanded ：

Row(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
        Expanded(
          child: OutlineButton(
            child: Text('OutlineButton'),
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 100,
        ),
      ],
    )

Spacer 也是一個(gè)權(quán)重組件，源代碼如下：

@override
Widget build(BuildContext context) {
  return Expanded(
    flex: flex,
    child: const SizedBox.shrink(),
  );
}

Spacer 的本質(zhì)也是 Expanded 的實(shí)現(xiàn)的，和Expanded的區(qū)別是：Expanded 可以設(shè)置子控件，而 Spacer 的子控件尺寸是0，因此Spacer適用于撐開(kāi) Row、Column、Flex 的子控件的空隙，用法如下：

Row(
  children: <Widget>[
    Container(width: 100,height: 50,color: Colors.green,),
    Spacer(flex: 2,),
    Container(width: 100,height: 50,color: Colors.blue,),
    Spacer(),
    Container(width: 100,height: 50,color: Colors.red,),
  ],
)

三個(gè)權(quán)重組建總結(jié)如下：

Spacer 是通過(guò) Expanded 實(shí)現(xiàn)的，Expanded繼承自Flexible。
填滿(mǎn)剩余空間直接使用Expanded更方便。
Spacer 用于撐開(kāi) Row、Column、Flex 的子組件的空隙。

仿掘金-我效果

先看下效果：

拿到效果圖先不要慌（取出手機(jī)拍照發(fā)個(gè)朋友圈??），整個(gè)列表每一行的布局基本一樣，所以先寫(xiě)出一行的效果：

class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);

  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(iconData,color: iconColor,),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }
}

消息中心和其他行最后的樣式不一樣，單獨(dú)封裝，帶紅色背景的組件：

class _NotificationsText extends StatelessWidget {
  final String text;

  const _NotificationsText({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.red),
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

灰色后綴組件：

class _Suffix extends StatelessWidget {
  final String text;

  const _Suffix({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$text',
      style: TextStyle(color: Colors.grey.withOpacity(.5)),
    );
  }
}

將這些封裝好的組件組合起來(lái)：

class SettingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _SettingItem(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '消息中心',
          suffix: _NotificationsText(
            text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          title: '我贊過(guò)的',
          suffix: _Suffix(
            text: '121篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          title: '收藏集',
          suffix: _Suffix(
            text: '2個(gè)',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.shopping_basket,
          iconColor: Colors.yellow,
          title: '已購(gòu)小冊(cè)',
          suffix: _Suffix(
            text: '100個(gè)',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          title: '我的錢(qián)包',
          suffix: _Suffix(
            text: '10萬(wàn)',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.location_on,
          iconColor: Colors.grey,
          title: '閱讀過(guò)的文章',
          suffix: _Suffix(
            text: '1034篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.local_offer,
          iconColor: Colors.grey,
          title: '標(biāo)簽管理',
          suffix: _Suffix(
            text: '27個(gè)',
          ),
        ),
      ],
    );
  }
}

至此就結(jié)束了。

柱狀圖

先來(lái)看下效果：

關(guān)于動(dòng)畫(huà)部分的內(nèi)容會(huì)在后面的章節(jié)具體介紹。這個(gè)效果分為3大部分：

坐標(biāo)軸，左邊和底部黑色直線(xiàn)。
矩形柱狀圖。
動(dòng)畫(huà)控制部分。

坐標(biāo)軸的實(shí)現(xiàn)如下：

class _Axis extends StatelessWidget {
  final Widget child;

  const _Axis({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: Colors.black, width: 2),
          bottom: BorderSide(color: Colors.black, width: 2),
        ),
      ),
      child: child,
    );
  }
}

單個(gè)柱狀圖實(shí)現(xiàn)：

class _Cylinder extends StatelessWidget {
  final double height;
  final double width;
  final Color color;

  const _Cylinder({Key key, this.height, this.width, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 1),
      height: height,
      width: width,
      color: color,
    );
  }
}

生成多個(gè)柱狀圖：

final double _width = 20.0;
List<double> _heightList = [60.0, 80.0, 100.0, 120.0, 140.0];

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: List.generate(_heightList.length, (index) {
      return _Cylinder(
        height: _heightList[index],
        width: _width,
        color: Colors.primaries[index % Colors.primaries.length],
      );
    }))

將此合并，然后更改每一個(gè)柱狀圖的高度：

class CylinderChart extends StatefulWidget {
  @override
  _CylinderChartState createState() => _CylinderChartState();
}

class _CylinderChartState extends State<CylinderChart> {
  final double _width = 20.0;
  List<double> _heightList = [60.0, 80.0, 100.0, 120.0, 140.0];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 250,
        child: Stack(
          children: <Widget>[
            _Axis(),
            Positioned.fill(
              left: 5,
              right: 5,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: List.generate(_heightList.length, (index) {
                    return _Cylinder(
                      height: _heightList[index],
                      width: _width,
                      color: Colors.primaries[index % Colors.primaries.length],
                    );
                  })),
            ),
            Positioned(
              top: 0,
              left: 30,
              child: OutlineButton(
                child: Text('反轉(zhuǎn)'),
                onPressed: () {
                  setState(() {
                    _heightList = _heightList.reversed.toList();
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

搞定。

交流

老孟Flutter博客地址（330個(gè)控件用法）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關(guān)注公眾號(hào)【老孟Flutter】：

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

【Flutter實(shí)戰(zhàn)】定位裝飾權(quán)重組件及柱狀圖案例

【Flutter實(shí)戰(zhàn)】定位裝飾權(quán)重組件及柱狀圖案例

Container

SizedBox

AspectRatio

FractionallySizedBox

權(quán)重組件

仿掘金-我效果

柱狀圖

交流

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

【Flutter實(shí)戰(zhàn)】定位裝飾權(quán)重組件及柱狀圖案例

Container

SizedBox

AspectRatio

FractionallySizedBox

權(quán)重組件

仿 掘金-我 效果

柱狀圖

交流

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

仿掘金-我效果