Flutter container 组件和Text 组件

首先,在flutter项目中,作为整个项目的RootWidget组件可以是MaterialApp组件 或者  Center 组件,如果直接使用Container组件作为根视图,将会提示您视图内容顺序错误.

Container 组件在开发中一般作为一个容器使用,类似Html中的 Div 标签,它的基本用法如下

class HomeContent extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Container(

child: Text(

'hello',

textAlign: TextAlign.center,

style: TextStyle(

color: Colors.red,

fontSize: 18,

height: 20,

),

),

height: 400,

width: 400,

decoration: BoxDecoration(

border: Border.all(

width: 2,

color: Colors.black,

),

borderRadius: BorderRadius.all(Radius.circular(10)),

color: Colors.red,

),

),

);

}

}

在Center 作为根视图的情况下,child中构造一个 Container组件,并且设置了 宽度和高度,其他的属性在decoration 这个参数中设置,值为BoxDecoration的一个对象,可以设置的属性有:

/// * If [color] is null, this decoration does not paint a background color.

/// * If [image] is null, this decoration does not paint a background image.

/// * If [border] is null, this decoration does not paint a border.

/// * If [borderRadius] is null, this decoration uses more efficient background

/// painting commands. The [borderRadius] argument must be null if [shape] is

/// [BoxShape.circle].

/// * If [boxShadow] is null, this decoration does not paint a shadow.

/// * If [gradient] is null, this decoration does not paint gradients.

/// * If [backgroundBlendMode] is null, this decoration paints with [BlendMode.srcOver]

/// The [shape] argument must not be null.

在实际开放过程中学会查看文档和库文件很重要,在Mac开放中 我们可以鼠标左键+Command 选中一个类,进入查看详细信息,这一点和iOS开发是一样的.所以一个组件的使用和属性在开放中慢慢摸索

Text 组件

在上述代码中,我们在 Container组件中放入了一个Text组件作为Container的Child,Text组件初始化的时候就是创建Text的一个实例,并传入相关参数和设置.如下是Text组件的相关属性和描述.

/// If the [style] argument is null, the text will use the style from the

/// closest enclosing [DefaultTextStyle].

/// The [data] parameter must not be null.

///

/// The [overflow] property's behavior is affected by the [softWrap] argument.

/// If the [softWrap] is true or null, the glyph causing overflow, and those that follow,

/// will not be rendered. Otherwise, it will be shown with the given overflow option.

const Text(

String this.data, {

Key? key,

this.style,

this.strutStyle,

this.textAlign,

this.textDirection,

this.locale,

this.softWrap,

this.overflow,

this.textScaleFactor,

this.maxLines,

this.semanticsLabel,

this.textWidthBasis,

this.textHeightBehavior,