Flutter布局之标题


原文链接

教程推荐


效果图

代码

Widget titleSection = Container(
    padding: const EdgeInsets.all(32.0),
    color: Colors.grey[100],
    child: Row(
      children: [
        Expanded(   //分析1
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,  //分析 2
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Text(
                  '标题行',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Text(
                '描述行',
                style: TextStyle(
                  color: Colors.grey[500],
                ),
              ),
            ],
          ),
        ),
        Icon(
          Icons.star,
          color: Colors.red[500],
        ),
        Text('描述'),
      ],
    ),
  );
复制代码

分析

  • 分析1: Expanded 中包含的内容是(标题行和描述行)。使用Expanded会让其内容占据屏幕中除了其他内容外剩余的空间,也就是下图中虚线框的位置:

  • 分析2 crossAxisAlignment: CrossAxisAlignment.start 代表内容 左对齐
Flutter布局系统基于 Widget 构建,几乎所有 UI 元素都可以被视为一个 Widget。Flutter 提供了丰富的布局控件来帮助开发者构建灵活、高效的用户界面。下面是一些常用的 Flutter 布局控件及其作用: --- ### **1. Container** `Container` 是一种通用的绘制、定位和调整大小的 widget。它可以设置宽高、背景颜色、边框、圆角等属性,并能嵌套其他 widgets。 ```dart Container( width: 100, height: 100, color: Colors.blue, ) ``` **特点**: - 可用于装饰单个元素(如添加边距、填充)。 - 灵活性强,支持多种样式配置。 --- ### **2. Row 和 Column** `Row` 和 `Column` 分别表示水平方向和垂直方向排列的一组子 Widgets。 #### 示例 - 水平排布 (Row): ```dart Row( children: [ Icon(Icons.star), Text('Hello World'), ], ) ``` #### 特点: - 支持主轴对齐 (`mainAxisAlignment`) 和交叉轴对齐 (`crossAxisAlignment`) 属性。 - 使用场景包括标题栏设计或列表项内容组织。 --- ### **3. Stack 和 Positioned** `Stack` 将其所有子组件堆叠在一起显示;而 `Positioned` 则可以控制某个 child 在 stack 中的具体位置。 示例代码如下: ```dart Stack( children: <Widget>[ Image.network("https://example.com/image.jpg"), Positioned( bottom: 0, right: 0, child: Text("Overlay text"), ), ], ); ``` 这里图片作为底图,文字则通过 position 设置漂浮于右下角区域之上形成叠加效果。 --- ### **4. ListView** 当需要展示大量数据时,`ListView` 能够提供滚动视图的功能,它会按需渲染可见范围内的 items,提升性能表现。 简单例子: ```dart ListView.builder( itemCount: 50, itemBuilder: (context, index){ return ListTile(title:Text("Item $index")); } ) ``` 此段落生成包含数字编号项目的长列表。 --- ### **5. Expanded 和 Flexible** 这两个容器用来处理复杂流式布局情况下的尺寸分配问题。“Expanded”强制占据剩余空间,“Flexible”允许更自由地适应周围环境条件变化。 例如结合 row 来平均分割宽度给两个文本块: ```dart Row( children:[ Expanded(child:TextField()), SizedBox(width:8), //间距 Expanded(child:ElevatedButton(onPressed:null,text:"Submit")) ]) ``` 上述将输入框与按钮放置一行并均分可用长度资源。 --- ### 总结 以上只是部分常见的 Flutter 布局控件说明,实际项目里可能还需要用到更多高级功能比如自定义画板或者动画交互特效等等。随着实践深入理解加深之后能够更好地驾驭整个框架体系完成各种需求任务!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值