flutter学习--布局

最新推荐文章于 2020-09-24 15:12:09 发布
最新推荐文章于 2020-09-24 15:12:09 发布
阅读量831 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： android flutter 文章标签： android flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pgg_cold/article/details/90321448
本文详细介绍了Flutter中的四种布局：Row的不灵活、灵活及混合复用布局，Column的主轴和副轴对齐，Stack的层叠布局以及CircleAvatar、Positioned组件的应用，最后讲解了卡片组件的布局方式，展示了如何创建一个类似收获地址的列表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Row水平布局

不灵活水平布局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
      
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: (){
                  
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              ),
              new RaisedButton(
                onPressed: (){
               
                },
                color:Colors.orangeAccent,
                child: new Text('黄色按钮'),
              ),  
              new RaisedButton(
                onPressed: (){
                 
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )
            ],
          )
        ),
      );
  }
}

页面已经有了三个按钮，但这三个按钮并没有充满一行，而是出现了空隙。这就是不灵活横向排列造成的。它根据子元素的大小来进行排列。

灵活水平布局

解决上面有空隙的问题，可以使用 Expanded来进行解决，也就是我们说的灵活布局。我们在按钮的外边加入Expanded就可以了，代码如下：

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
      
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              Expanded(child:new RaisedButton(
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              )),
              Expanded(child:new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                )
              
              ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )             
              )
            ],
          )
        ),
      );
  }
}

在这里插入图片描述

混合复用

import 'package:flutter/material.dart';

void main() => runApp(new MyClass());

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Row Layout"),
        ),
        body: new Row(
          children: <Widget>[
            new RaisedButton(
                onPressed: () {},
                color: Colors.black,
                child: Text("黑色按钮",style: TextStyle(color: Colors.white),),
              ),
            Expanded(
                child: new RaisedButton(
              onPressed: () {},
              color: Colors.red,
              child: Text("红色按钮"),
            )),
            new RaisedButton(
              onPressed: () {},
              color: Colors.yellow,
              child: Text("黄色按钮"),
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

Column垂直布局

import 'package:flutter/material.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Column 垂直布局"),
        ),
        body: new Column(
          children: <Widget>[
//            new RaisedButton(onPressed: ()=>{},color: Colors.red,),
//            new RaisedButton(onPressed: ()=>{},color: Colors.black,),
//            new RaisedButton(onPressed: ()=>{},color: Colors.yellow,),
            Text('I am JSPang'),
            Text('my website is jspang.com'),
            Text('I love coding')
          ],
          crossAxisAlignment: CrossAxisAlignment.start,//居左对齐
        ),
      ),
    );
  }
}

左对齐只要在column组件下加入下面的代码，就可以让文字左对齐。

  • CrossAxisAlignment.star：居左对齐。
  • CrossAxisAlignment.end：居右对齐。
  • CrossAxisAlignment.center：居中对齐。

主轴和副轴的辨识

在设置对齐方式的时候你会发现右mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴那。

main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。

cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。

主轴和幅轴我们搞清楚，才能在实际工作中随心所欲的进行布局。

mainAxisAlignment: MainAxisAlignment.center,

水平方向相对屏幕居中

让文字相对于水平方向居中，我们如何处理？其实只要加入Center组件就可以轻松解决。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
          ),
          body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             Center(child:Text('I am JSPang')),
             Center(child:Text('my website is jspang.com')),
             Center(child:Text('I love coding'))
            ],
          )
        ),
      );
  }
}

Expanded属性的使用

其实在学习水平布局的时候我们对Expanded有了深刻的理解，它就是灵活布局。比如我们想让中间区域变大，而头部区域和底部根据文字所占空间进行显示。

body:Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(child:Text('I am JSPang')),
    Expanded(child:Center(child:Text('my website is jspang.com'))),
    Center(child:Text('I love coding'))
  ],
)

Stack层叠布局

在头像上方再放入一个容器，容器里边写上字，这时候我们就可以使用Stack布局.

层叠布局的 alignment 属性

alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的

CircleAvatar组件的使用

CircleAvatar这个经常用来作头像的，组件里边有个radius的值可以设置图片的弧度。
现在我们准备放入一个图像，然后把弧度设置成100，形成一个漂亮的圆形，代码如下：

new CircleAvatar(
  backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
  radius: 100.0,
),

完整代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyClass());

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text("pggpg"),
        )
      ],
    );
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Row Layout"),
        ),
        body:Center(
          child: stack,
        )
      ),
    );
  }
}

在这里插入图片描述

Positioned组件的属性

  • bottom: 距离层叠组件下边的距离
  • left：距离层叠组件左边的距离
  • top：距离层叠组件上边的距离
  • right：距离层叠组件右边的距离
  • width: 层叠定位组件的宽度
  • height: 层叠定位组件的高度
var stack = new Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
          radius: 100.0,
        ),
        Positioned(child: Text("pggpg"),top: 150.0,left: 50.0,),
        Positioned(child: Text("胖哥哥飘过"),top: 20.0,left: 20.0,)
      ],
    );

在这里插入图片描述

卡片组件布局

现在要开发一个类似收获地址的列表，并且列表外部使用一个卡片式布局。
卡片式布局默认是撑满整个外部容器的，如果你想设置卡片的宽高，需要在外部容器就进行制定。
使用了一个垂直布局组件Column组件，然后利用了ListTile实现内部列表，这里需要说明的是ListTile不光可以使用在ListView组件中，然后容器组件其实都可以使用

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var card = new Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title:new Text('吉林省吉林市昌邑区',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('胖哥哥飘过:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title:new Text('北京市海淀区中国科技大学',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('胜宏宇:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title:new Text('河南省濮阳市百姓办公楼',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('pggpg:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),

        ],
      ),

    );
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('卡片布局'),
        ),
        body:Center(child:card),
      ),
    );
  }
}

在这里插入图片描述

Flutter基础 -- Flutter布局练习（小项目）
原来45的博客
06-06 1359
flutter 小项目
Flutter使组件居于屏幕中间
XinBaDeRongYao的博客
04-10 3436
以上是几种常见的将组件居于屏幕中间的方式，具体使用哪种方式要根据实际情况来决定。5. 使用 Stack 和 Positioned 组件将子组件居中。4. 使用 SizedBox 组件指定子组件的宽高，将其居中。2. 使用 Align 组件指定子组件的对齐方式，将其居中。3. 使用 Column 或 Row 组件将子组件居中。1. 使用 Center 组件将子组件居中。
Flutter中Scaffold布局的使用详解及实例代码
热门推荐
卜大爷的博客
09-24 2万+
Flutter中Scaffold布局的使用详解及实例代码 Scaffold实现了基本的Material布局。只要是在Material中定义了的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。 继承关系：Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Scaffold。 源码 /// See also: /// /// * [AppBar], which is a
Flutter初体验（二）—— 创建第一个Flutter APP
weixin_33857679的博客
03-21 460
Flutter初体验（二）--- 创建第一个Flutter APP 在第一篇文章 Flutter初体验（一）---Mac 安装配置，学习了配置 Flutter 开发环境，并运行了Demo项目，本篇根据官方教程，学习创建自己的第一个Flutter APP。 参考文档 https://flutter.io/get-started/codelab/ 复制代码 项目需求 您将实施一个简单的移动应用...
Flutter学习之入门程序HelloWorld
Wayfreem的博客
08-25 3561
简介 每当我们去学习一个新的语言的时候，就都是从入门的程序开始。比如我们学习 java 那么就是从 System.out.print(“Hello world”) 开始。我们学习 Flutter 也是一样。 准备工作 新建一个 flutter 工程，可以参考 创建Flutter工程 检查是否启用了material design 在工程的根目录下的文件：pubspec.yaml 中的找...
[DART]界面构造
小罗的学习博客
07-24 701
import 'package:flutter/material.dart'; void main() =&gt; runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(Bui...
flutter-windows-3.16.8-stable.zip
最新发布
01-27
3. **docs**：包含Flutter的文档和API参考，对学习和理解Flutter框架非常有帮助。 4. **packages**：这个目录包含Flutter框架的核心库，如动画、布局、网络、文件处理等模块，开发者可以直接在项目中引用。 5. **...
flutter版本---云顶之弈助手.zip
01-05
1. **Flutter基础知识**：包括Widget、StatefulWidget与 StatelessWidget的区别，以及如何构建UI布局，如Column、Row、Stack等布局组件的使用。此外，还有对Material Design设计原则的理解和应用。 2. **网络请求**...
flutter-getx-doc:Flutter GetX文档
04-02
3. 响应式布局：Dumi 自适应不同设备的屏幕尺寸，确保文档在手机、平板和桌面等设备上都能良好显示。 三、工程化模式 在文档中，除了对 GetX 的基本功能介绍，还可能涵盖了如何在大型项目中采用 GetX 进行工程化的...
flutter-web-demo：by由Flutter和Dart支持的自适应Web应用程序
02-03
通过Flutter Web Demo，开发者不仅可以学习到Flutter和Dart的基本用法，还能深入理解如何利用Flutter构建响应式、跨平台的Web应用程序，同时掌握与现有Web技术的集成技巧。这个项目对于想要拓宽技能范围，进入Web...
flutter的组件使用
qq_28335347的博客
04-18 295
1.Container容器组件示例 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(B...
我的第一个 Flutter APP 应用
KEEP RUNNING的博客
08-12 1288
This trailing comma makes auto-formatting nicer for build methods.逗号结尾使构建方法的自动格式化更好。
使用Material Design的Flutter应用
咖啡花园
12-13 5205
使用Flutter框架必须要导入flutter/material.dart包，然后在main()函数中调用material包的runApp函数，这样就可以启动一个Flutter应用。访问《Flutter框架基础》了解更多内容。import 'package:flutter/material.dart'; void main() { return runApp(Widget app); }那么如何
Flutter学习历程
u010194271的博客
06-08 243
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Startup Name Generator', theme: new T.
Flutter(二) 创建第一个Flutter App
VoidHope的博客
03-29 5781
这一章主要是创建一个Flutter App。如果你熟悉面向对象编程，有基本的编程概念（变量，循环，条件判断等），那么你不必要具备原有的Dart和移动开发经验，，就可以轻松地理解完成这章内容。 Step 1：创建第一个flutter app Step 2：使用外部包 Step 3：添加一个有状态的组件（Stateful widget） Step 4：创建无限滚动ListView Step 5：添...
Flutter：Center（居中布局），Padding（填充布局），Align（对齐布局）
Lud的博客
10-21 1万+
文章目录Center （居中布局）Padding （填充布局）Align （对齐布局） Center （居中布局） 在Center布局中，子元素处于水平和垂直方向的中间位置。代码如下： void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of y...
Android面试题（27）-android的事件分发机制
pgg_cold的博客
03-07 1万+
今天开始写一点关于view的知识，先从最基本的讲吧，android的事件分发机制，其实在我看来，android的事件分发机制在现实生活中经常能看到，所以我觉得还是很好理解的；先看看生活中常见的一种情形吧；比如说，现在你所在的公司中有一项任务被派发下来了，项目经理把项目交给你的老大，你的老大老大手下有很多人，看了看觉得你做很合适，把这个任务交给你了；你一看觉得还行，你就接下来了；这么一个小小场景大概...
RxJava2+Retrofit2+okHttp的二次封装
pgg_cold的博客
01-20 1万+
项目Demo已经上传至github链接本人android小白一枚，在学习android的过程中，我感受很深，在做了这么多练手的项目之后，我觉得android就像一块画板，画板是白纸，作为android的开发人员，要做的就是运用一切可能，去在画板上画出让人看的懂并且美观的画。说起来，我们却也属于艺术家这一行了。。。在我看来，android是为了展示数据的，这里就要分两个步骤了，第一就是怎样去展示，这...
Android面试题（31）-App启动流程
pgg_cold的博客
03-08 1万+
先贴个链接，总结的挺全面 在看这篇文章之前，希望先看完我的之前的博客 android面试（6）-Binder机制，因为关于App启动流程设计很多Binder通信； 先将“三个进程”，“六个大类”进行介绍： 三个进程： Launcher进程：整个App启动流程的起点，负责接收用户点击屏幕事件，它其实就是一个Activity，里面实现了点击事件，长按事件，触摸等事件，可以这么理解，把Launc...
掌握Flutter开发：flutter-common-widgets-app实战指南
描述中提到这个项目“适合flutter学习提高”，意味着这个项目覆盖了Flutter开发的关键知识点，如界面布局、状态管理、用户输入处理、数据存储、网络通信等。开发者可以通过研究这个项目中的代码来了解如何实现各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值