章节一基础组件-优快云博客

本文链接：https://blog.youkuaiyun.com/guo5236/article/details/138580098

简要说明

Flutter 的页面布局是由一个又一个的基础组件组成的，即 Widget
组件可以理解为可视化的图形、文本、甚至是 tab等
以上，学习第一步，绘制基础组件

Container 容器

            Container(
              alignment: Alignment.center,
              width: 200,
              height: 100,
              color: Colors.blue,
              child: Container(),
            ),

Container 是一个容器，可以理解为在页面画了一个区域，它是个矩形
只能存在一个子组件，若要应用多个子组件时，配合布局组件 Colum、Row 使用
基础属性：
- 大小：width、height
- 颜色：color，示例 color: Color(0xFFFDFDFE)、高级用法颜色渐变 gradient: LinearGradient(colors: [Colors.red,Colors.green.shade700])
- 布局：Container下的布局只能控制其子组件，用法为 alignment: Alignment.topLeft
- 装饰：decoration: BoxDecoration，可以直接在 Container组件下使用，可设置属性包括颜色、圆角等，更加灵活的实现方式。圆角 borderRadius: BorderRadius.circular(12)，或 borderRadius: BorderRadius.only(topLeft: Radius.circular(12),topRight: Radius.circular(12))，必须放置在 decoration: BoxDecoration下使用

间距与留白

组件间间距：SizedBox(width: 5)
内间距：padding: EdgeInsets.all(12)、padding: EdgeInsets.only(top: 10,bottom: 10)、
padding: EdgeInsets.fromLTRB(15, 44, 15, 0)
外间距：margin: EdgeInsets.only(left: 12,right: 12)，类似同上
注意，内外间距为 Container的属性

填充方式

宽度撑满：width: double.infinity
高度撑满：height: double.infinity
弹性填充：Expanded
- 等分：Expanded下使用 flex，示例 flex: 1，数值表示份数
- 留白：Expanded(child: SizedBox())
图片填充：fit: BoxFit
- fit: BoxFit.fill：拉伸充满，比例变化，会变形
- fit: BoxFit.cover：最短边完全放大后居中填充，比例不变，上下/左右会裁剪
- fit: BoxFit.contain：缩放填充，比例不变
- fit: BoxFit.fitWidth：适配宽度，高度自适应
- fit: BoxFit.fitHeight：适配高度，宽度自适应

Text 文本

                      Text(
                        widget.shopCardModel.book?[2].name??'',
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          color: Color(0xFF080809),
                          fontSize: 14,
                          fontFamily: "PingFang",
                        ),
                      ),

基础属性：
- 对齐方式：textAlign: TextAlign.left
- 样式：style: TextStyle，可设置属性有 color: Color(0xFF080809)、fontSize: 14、fontFamily: "PingFang"、decoration:TextDecoration.underline、fontWeight: FontWeight.w500 等
特殊属性：
- 超出展示...：overflow: TextOverflow.ellipsis
- 最大行数：maxLines: 2

Image 图片

                      Image(
                        image: AssetImage(widget.shopCardModel.book?[2].image??'',),
                        width: 70,
                      ),

本地图片：要先创建一个文件夹进行导入存储，文件夹与lib同级，之后在 pubspec.yaml下引入图片

Button 按钮

            TextButton(
              child: Text("Open new route"),
              onPressed: (){
                Navigator.pushNamed(context, "new_page");
              },
            ),

ElevatedButton：悬浮按钮，创建 Flutter文件时的计数器示例
TextButton：文本按钮
IconButton：图标按钮
Icon + 文本形态按钮实现方式：ElevatedButton.icon、TextButton.icon，其下的属性为 icon: Icon(Icons.add)、label: Text("添加")

TextField 输入框

            TextField(
              decoration: InputDecoration(
                labelText: "password",
                hintText: "password for login",
                prefixIcon: Icon(Icons.lock),
              ),
              obscureText: true,
              maxLength: 8,
            ),

这是一个密码输入框
外显名：labelText: "password"
点击提示：hintText: "password for login"，点击后此时会拉起键盘，会在输入框内给予提示
隐藏：obscureText: true
长度：maxLength: 8，会给予 0/8类似的提示
此外，还有很多属性，如获取焦点、监听输入内容（controller）等，后续实践后补充

Loading 进度条

            LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              value: 0.2,
            ),