Container —— 容器类
一、使用方法
-
如果窗口小部件没有孩子，没有对齐，而是一个height，width或 限制提供，则Container试图给出这些限制和家长的约束相结合，以尽可能小。
Container( margin: const EdgeInsets.all(10.0), color: const Color(0xFF00FF00), width: 48.0, height: 48.0, )复制代码
-
如果窗口小部件没有子窗口，没有height，没有width，没有约束，没有对齐，但是父窗口提供了有界约束，那么Container会扩展以适应父窗口提供 的约束。
Container( margin: const EdgeInsets.all(10.0), color: const Color(0xFF00FF00), )复制代码
-
如果子窗口有宽高、对齐，父窗口没有宽高、对齐，则父窗口会尝试围绕子窗口调整自身大小。
Container( margin: const EdgeInsets.all(10.0), color: const Color(0xFFFFFF00), child: Container( constraints: BoxConstraints.expand( height: 50, width: 70, ), margin: const EdgeInsets.all(20.0), color: const Color(0xFF00FF00), ), )复制代码
-
如果子窗口没有宽高对齐，父窗口提供有有宽高、对齐，则子窗口会尝试展开以适合父窗口，然后根据对齐方式将子项置于其自身内部。
Container( constraints: BoxConstraints.expand( width: 180, height: 180, ), margin: const EdgeInsets.all(10.0), color: const Color(0xFF1251F0), child: Container( margin: const EdgeInsets.all(20.0), color: const Color(0xFFee34e5), ), )复制代码
-
一个比较完整的container实例
Container( //BoxConstraints 盒子模型约束 ,设置边框约束 constraints: BoxConstraints.expand( height: 700, width: 400 ), //设置padding padding: const EdgeInsets.all(8.0), color: Colors.teal.shade700, //设置子容器的对其方式 alignment: Alignment.center, // Widget 设置子控件 child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)), //设置前景盒子装饰 foregroundDecoration: BoxDecoration( color: const Color(0xff7c94b6), image: DecorationImage( image: NetworkImage('http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg'), fit: BoxFit.cover, alignment: Alignment.topCenter ), border: Border.all( color: Colors.black, width: 8.0, ), ), //设置变换 transform: Matrix4.rotationZ(0.2), ),复制代码 二、常用的属性
- alignment ：设置对其方式
alignment：Alignment.center复制代码
- child : 设置容器子控件
child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white))复制代码 - constraints ：设置约束
constraints: BoxConstraints.expand( height: 700, width: 400 )复制代码
- decoration ：设置背景装饰
Container( decoration: BoxDecoration( color: const Color(0xff7c94b6), image: DecorationImage( image: ExactAssetImage('images/flowers.jpeg'), fit: BoxFit.cover, ), border: Border.all( color: Colors.black, width: 8.0, ), ), )复制代码 - foregroundDecoration：设置前景装饰
foregroundDecoration: BoxDecoration( color: const Color(0xff7c94b6), image: DecorationImage( image: NetworkImage('http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg'), fit: BoxFit.cover, alignment: Alignment.topCenter ), border: Border.all( color: Colors.black, width: 8.0, ), )复制代码 - margin 设置外边距
margin: const EdgeInsets.all(20.0)复制代码
- padding 设置内边距
padding: const EdgeInsets.all(8.0)复制代码
- transform ：设置变换
transform: Matrix4.rotationZ(0.2),复制代码
7.一些常用的方法
- build（BuildContext context） → Widget 描述此窗口小部件表示的用户界面部分
@overrideWidget build ( BuildContext context){ }复制代码 三、一个完整的例子
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); // This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks. // This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final". final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State { int _counter = 0; void _incrementCounter() { setState(() { // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; }); } //描述此窗口小部件表示的用户界面部分 @override Widget build(BuildContext context) { // This method is rerun every time setState is called, for instance as done // by the _incrementCounter method above. // // The Flutter framework has been optimized to make rerunning build methods // fast, so that you can just rebuild anything that needs updating rather // than having to individually change instances of widgets. return Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text(widget.title), ), body: Center( child:// //container 示例1// 如果窗口小部件没有孩子，没有对齐，而是一个height，width或 限制提供，则集装箱试图给出这些限制和家长的约束相结合，以尽可能小。// Container(// margin: const EdgeInsets.all(10.0),// color: const Color(0xFF00FF00),// width: 48.0,// height: 48.0,// )// //container 示例2// // 如果窗口小部件没有子窗口，没有height，没有width，没有约束，没有对齐，但是父窗口提供了有界约束，那么Container会扩展以适应父窗口提供 的约束。// Container(// margin: const EdgeInsets.all(10.0),// color: const Color(0xFF00FF00),// ) //container 示例3 // 如果窗口小部件具有对齐，并且父窗口提供无限制约束，则Container会尝试围绕子窗口调整自身大小。// Container( margin: const EdgeInsets.all(10.0),// color: const Color(0xFFFFFF00),// child: Container(// constraints: BoxConstraints.expand(// height: 50,// width: 70,// ),// margin: const EdgeInsets.all(20.0),// color: const Color(0xFF00FF00),// ),// )// //container 示例4// // 如果窗口小部件具有对齐，并且父窗口提供有界约束(有宽高)，则Container会尝试展开以适合父窗口，然后根据对齐方式将子项置于其自身内部// Container(// constraints: BoxConstraints.expand(// width: 180,// height: 180,// ),// margin: const EdgeInsets.all(10.0),// color: const Color(0xFF1251F0),// child: Container(// margin: const EdgeInsets.all(20.0),// color: const Color(0xFFee34e5),// ),// ) //container 示例5 一个比较完整的实例 Container( //BoxConstraints 盒子模型约束 ,设置边框约束 constraints: BoxConstraints.expand( height: 700, width: 400 ), margin: const EdgeInsets.all(20.0), //设置padding padding: const EdgeInsets.all(10.0), color: Colors.teal.shade700, //设置子容器的对其方式 alignment: Alignment.center, // Widget 设置子控件 child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)), //设置前景盒子装饰 foregroundDecoration: BoxDecoration( color: const Color(0xff7c94b6), image: DecorationImage( image: NetworkImage('http://c.hiphotos.baidu.com/image/pic/item/a8773912b31bb0516a13ec1d387adab44aede0d4.jpg'), fit: BoxFit.cover, alignment: Alignment.topCenter ), border: Border.all( color: Colors.black, width: 8.0, ), ), //设置变换 transform: Matrix4.rotationZ(0.2), ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}复制代码