PreferredSize优先尺寸

一、认识组件

1.PreferredSize组件介绍

实现了PreferredSizeWidget接口，可容纳一个子组件，设置优先尺寸，不会对其子组件施加任何约束。

名称:       PreferredSize  优先尺寸
类型:       布局型
重要性:     ☆☆
相关组件:   【Scaffold】、【AppBar】    
家族:       Widget
                |--- StatelessWidget
                |--- PreferredSizeWidget

---

2. 组件属性一览

属性名	属性类型	默认值	备注
key	Key	null	组件键
preferredSize	Size	@required	优先尺寸
child	Widget	@required	子组件

也许你曾为Scaffold的appBar是PreferredSizeWidget而束手无策，只能用AppBar
PreferredSize可以将一个普通的组件转化成PreferredSizeWidget

---

二、使用组件

1. 修改AppBar高度

AppBar高度的默认高度是56.0，使用PreferredSize可以进行调整

/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;

class CustomPreferredSize extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150),
          child: AppBar(
            title: Text('PreferredSize'),
          ),
        ),
      ),
    );
  }
}

---

2. 将普通组件转化成PreferredSizeWidget

当你遇到属性是PreferredSizeWidget时，你只能去找PreferredSizeWidget的实现类
这样限制会很大，如AppBar的底部栏，可以用PreferredSize包裹一下，容纳任何组件

class PaddingOnly extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.only(top:10,left: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}

---

三、尾声

FlutterUnit开源项目: https://github.com/toly1994328/FlutterUnit
我的公众号:编程之王
联系我–邮箱:1981462002@qq.com –微信:zdl1994328
@张风捷特烈 2020.04.29
~ END ~