美文网首页
Flutter布局尝试

Flutter布局尝试

作者: 小熊学编程 | 来源:发表于2020-04-23 16:36 被阅读0次

官方的例子实现


Simulator Screen Shot - iPhone 11 Pro Max - 2020-04-23 at 16.31.20.png

1. 实现图片模块

Widget imageSection = new Container(
      padding: EdgeInsets.only(top: 8),
      child: Image.asset('images/timg.jpeg',
        height: 240.0,
        fit: BoxFit.cover,
      ),
    );

2. 实现标题模块

Widget titleSection = new Container (
        padding: EdgeInsets.all(32.0),
        color: Colors.white,
        child: Row(
          children: [
            // 左半部分上下标题/副标题
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(// 创建一个容器,标题在容器中设置下边距,也可以在外部设置边距
                    padding: EdgeInsets.only(bottom: 8.0),
                    child: Text(
                      "我是大标题",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  Text(
                    '我是一个挺长的副标题',
                    style: TextStyle(
                      color: Colors.grey,
                    ),
                  )
                ],
              ),
            ),
            // 右边小星星
            Icon(
              Icons.star,
              color: Colors.red,
            ),
            // 设置右边距
            Padding(padding: EdgeInsets.only(right: 8)),
            // 右边数字
            Text('41'),
          ],
        ),
    );

3. 实现按钮模块

// 自定义按钮定制
    Column buildButtonColumn(IconData icon, String label) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, color: Colors.blue),
          Padding(padding: EdgeInsets.only(top: 20.0),),
          Text(
            label, 
            style: TextStyle(
              fontSize: 12.0,
            ),
          ),
        ],
      );
    }

    // 按钮行创建
    Widget buttonSection = Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            buildButtonColumn(Icons.call, "打电话"),
            buildButtonColumn(Icons.near_me, "找我"),
            buildButtonColumn(Icons.share, "分享"),
          ],
        ),
    );

4. 实现正文模块

Widget textSection = Container(
      padding: EdgeInsets.fromLTRB(32, 40, 32, 0),
      child: Text('今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.今天是个好日子,心想的事情都能成.')
    );

5. 整合所有模块

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      
      body: ListView (
        
        children: [
          // 图片模块
          imageSection,
          // 标题模块
          titleSection,
          // 按钮模块
          buttonSection,
          // 正文模块
          textSection,
        ],
      ),
    );

源码地址

相关文章

  • Flutter布局尝试

    官方的例子实现 1. 实现图片模块 2. 实现标题模块 3. 实现按钮模块 4. 实现正文模块 5. 整合所有模块...

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • 撸一款Flutter版『微信』

    背景 Flutter也学了一段时间,这个项目自己是想对于布局这一块做一点的总结和尝试,Flutter的布局和IOS...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

  • flutter(六,页面布局篇)

    Tags: flutter Flutter页面布局篇 [TOC] 1. 布局及装饰组件说明 2. 基础布局处理 2...

  • 2019-04-15 Flutter 布局方式

    1:Flutter 的 布局 1.1概述: 1.2总体 flutter 中的布局 是以原子布局实体为填充物,根据行...

网友评论

      本文标题:Flutter布局尝试

      本文链接:https://www.haomeiwen.com/subject/jimaihtx.html