IT@程序员猿媛Flutter基础和实战Flutter圈子

第二章●第三节:容器(Container)

2019-05-01  本文已影响11人  白晓明
容器组件我们可以比喻成一个菜篮子,我们可以将我们喜欢的蔬菜放到里面。但其并不是一个菜篮子,它在绘制过程中,首先应用给定的矩阵变换,然后绘制装饰以填充范围,接着绘制子组件,最后绘制foregroundDecoration,同时填充范围。
没有子组件的容器若无限制约束(这种情况,其会尽可能小)则试图尽可能大。有子组件的容器使用子组件尺寸适应自身。同时也可以用宽度,高度,和约束条件属性来控制。

布局行为:

官网示例一:在中心位置显示一个48*48的小绿块。

import 'package:flutter/material.dart';

void main() => runApp(myApp());
//在中心显示一个48*48的小绿块
class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Container 组件"),
        ),
        body: Center(
          child: Container(
            margin: const EdgeInsets.all(10.0),
            color: Colors.green,
            width: 48.0,
            height: 48.0,
          ),
        ),
      ),
    );
  }
}
中心小绿块

官网示例二:使用Container各类属性绘制一个图

import 'package:flutter/material.dart';

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


class exampleTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Container 组件"),
        ),
        body: Center(
          child: Container(
            constraints: BoxConstraints.expand(
              height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0
            ),
            padding: EdgeInsets.all(8.0),
            color: Colors.teal.shade700,
            alignment: Alignment.center,
            child: Text(
              "Hello World",
              style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white),
            ),
            foregroundDecoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage("https://www.example.com/images/fram.png"),
                centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0)
              )
            ),
            transform: Matrix4.rotationZ(0.1),
          ),
        ),
      ),
    );
  }

}
各类属性绘制容器

Container组件

Container组件

本节内容到此结束,若在使用过程中遇到问题,欢迎留言交流,我们一起成长。


总目录结构

上一篇 下一篇

猜你喜欢

热点阅读