今是昨非

今是昨非

日出江花红胜火,春来江水绿如蓝

Flutter组件基础——Container

Flutter 组件基础 ——Container#

Container 是容器组件,类似于 H5 中的

标签,亦或者 iOS 中的 UIView,是布局的基础控件。

Container 包含属性#

Container 常用属性如下:

  • Container
    • child:子视图
    • alignment:子视图的对齐方式
      • topLeft:顶部左对齐
      • topCenter:顶部居中对齐
      • topRight:顶部右对齐
      • centerLeft:中间左对齐
      • center:中间对齐
      • centerRight:中间右对齐
      • bottomLeft:底部左对齐
      • bottomCenter:底部居中对齐
      • bottomRight:底部右对齐
    • color:背景颜色
    • width:宽度
    • height:高度
    • padding:子视图距 Container 的边距
    • margin:Container 距父视图的边距
    • decoration:装饰

子视图对齐方式 - alignment#


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'Alignment center',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

效果图如下:

image image image

Container 宽、高#

width 和 height 的设置,直接是固定的值。

没有类似 H5 那种 '100%' 的设置。所以如果想要设置 Container 为屏幕宽高时,可以用以下的方法:

方法一:


import 'dart:ui';

final width = window.physicalSize.width;
final height = window.physicalSize.height;

Container(
  color: Colors.red,
  width: width,
  child: Text("宽度有多宽"),
)

方法二:


Container(
  color: Colors.red,
  width: double.infinity,
  child: Text("宽度有多宽"),
)

子视图距 Container 的边距 - padding#

padding 设置的是子视图,距 Container 的边距,两种设置方式,通常有两种设置方式,EdgeInsets.all常用于设置所有边距都一致;EdgeInsets.fromLTRB用于设置指定边距(LTRB 对应的 Left、Top、Right、Bottom)。代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'padding left: 10, top: 20',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
            // padding: const EdgeInsets.all(20),
          ),
        ),
      ),
    );
  }
}

显示效果如下:

image

contianer 距离父视图的边距 - margin#

margin 的设置和 padding 相同,效果对比,可以先注释 width 和 height,代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'margin all 30',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            // width: 500.0,
            // height: 400.0,
            color: Colors.lightBlue,
            // padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
            // padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(30.0),
          ),
        ),
      ),
    );
  }
}

效果如下:

image

container 的 decoration#

decoration 可用于设置背景色、背景渐变效果、边框效果等,需要注意 decoration 和 color 不能同时设置,如果需要设置,可以通过在 decoration 中设置 color 来实现,代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
              child: Text(
                'margin all 30',
                style: TextStyle(fontSize: 40.0),
              ),
              alignment: Alignment.topLeft,
              width: 500.0,
              height: 400,
              // color: Colors.lightBlue,
              // padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
              // padding: const EdgeInsets.all(20),
              // margin: const EdgeInsets.all(30.0),
              decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [
                    Colors.lightBlue,
                    Colors.greenAccent,
                    Colors.purple,
                  ]),
                  border: Border.all(width: 10.0, color: Colors.red),
                  color: Colors.lightBlue)),
        ),
      ),
    );
  }
}

效果如下:

image

报错:#

The following assertion was thrown building MyApp(dirty):
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package/src/widgets/container.dart':
Failed assertion: line 274 pos 15: 'color == null || decoration == null'

报错代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'Container Text',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),
            margin: const EdgeInsets.all(30.0),
            decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple,
                ]),
                border: Border.all(width: 10.0, color: Colors.red)),
          ),
        ),
      ),
    );
  }
}

原因:Container 的 color 和 decoration 不能同时设置,如果需要设置这两个,可以通过设置BoxDecoration(color: color)来实现

参考#

Flutter Conatiner Doc
Flutter 免费视频第二季 - 常用组件

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。