【Flutter -- 布局】Container 的基础使用

【Flutter -- 布局】Container 的基础使用

文章目录

​​一、简介​​

​​1. 作用​​​​2. 属性​​​​3. 使用场景​​

​​二、实例​​

​​1. 效果图​​​​2. 代码​​

一、简介

​​Container​​​ 在 Flutter 中太常见了。官方给出的简介，是一个结合了绘制（​​painting​​​）、定位（​​positioning​​​）以及尺寸（​​sizing​​​）​​widget​​​ 的 ​​widget​​。

可以得出几个信息，它是一个组合的 ​​widget​​​，内部有绘制 ​​widget​​​、定位 ​​widget​​​、尺寸 ​​widget​​​。后续看到的不少 ​​widget​​​ ，都是通过一些更基础的 ​​widget​​ 组合而成的。

1. 作用

用来放置 ​​widget​​​ 的容器，有 ​​padding​​​、​​margin​​、位置、大小等参数

最常用的默认布局！只能包含一个​​child​​​:，支持配置​​padding,margin,color​​​,宽高,​​decoration​​（一般配置边框和阴影）等配置，在 Flutter 中，不是所有的控件都有 宽高、​​padding、margin、color​​​ 等属性，所以有​​Padding、Center​​​ 等​​Widget​​。

2. 属性

3. 使用场景

Container 算是目前项目中，最经常用到的一个 widget 。在实际使用过程中，在以下情况会使用到 Container，当然并不是绝对的，也可以通过其他 widget 来实现。

需要设置间隔（这种情况下，如果只是单纯的间隔，也可以通过Padding来实现）；需要设置背景色；需要设置圆角或者边框的时候（ClipRRect也可以实现圆角效果）；需要对齐（Align也可以实现）；需要设置背景图片的时候（也可以使用Stack实现）。

二、实例

1. 效果图

2. 代码

import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Container 的基本使用'), ), body: Container ( constraints: BoxConstraints.expand( height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200, ), decoration: BoxDecoration( border: Border.all(width: 2.0,color: Colors.red), color: Colors.grey, borderRadius: BorderRadius.all(Radius.circular(20.0)), image: DecorationImage( image: AssetImage("images/avatar.png"), centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0) ), ), padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text('Hello Kevin', style: Theme.of(context).textTheme.displayMedium!.copyWith(color: Colors.black)), transform: Matrix4.rotationZ(0.3), ) ) ); }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。