姬長信(Redy)

第4章 常用组件

# 第4章 常用组件 Flutter里有一个非常重要的核心理念/uff1a一切皆为组件/uff0cFlutter所有的元素皆由组件组成。比如/uff1a一个布局元素、一个动画、一个装饰效果等。本章主要讲解开发中用得最频繁得组件。 本章所涉及的组件有/uff1a /u2022容器组件 /u2022图片组件 /u2022文本组件 /u2022图标组件 /u2022图标按钮组件 /u2022凸起按钮组件 /u2022基础列表组件 /u2022水平列表组件 /u2022长列表组件 /u2022网格列表组件 /u2022表单组件 ## 4.1 容器组件 容器组件/uff08Container/uff09包含一个子Widget/uff0c自身具备如alignment、 padding等基础属性/uff0c方便布局过程中摆放child。Container组件常用属性见表4-1。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041754177760) 接下来我们编写一个带有装饰效果的Container容器组件示例/uff0c主要是加了一个边框及底色/uff0c示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '容器组件示例', home: Scaffold( appBar: AppBar( title: Text('容器组件示例'), ), body: Center( //添加容器 child: Container( width: 200.0, height: 200.0, //添加边框装饰效果 decoration: BoxDecoration( color: Colors.white, //设置上下左右四个边框样式 border: new Border.all( color: Colors.grey, //边框颜色 width: 8.0, //边框粗细 ), borderRadius: const BorderRadius.all(const Radius.circular(8.0)), //边框的弧度 ), child: Text( 'Flutter', textAlign: TextAlign.center, style: TextStyle(fontSize: 28.0), ), ), ), ), ); } } ``` 上述示例代码视图展现大致如图4-1所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041756503777)