flutter 页面布局 Paddiing Row Column Expanded 组件

最新推荐文章于 2023-07-31 20:07:08 发布
最新推荐文章于 2023-07-31 20:07:08 发布
阅读量163 收藏
点赞数
文章标签： 移动开发
原文链接：http://www.cnblogs.com/loaderman/p/11170934.html
版权

Flutter Paddiing 组件

 

在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

属性

说明

padding

padding 值, EdgeInsetss 设置填充的值

child

子组件

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.7,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
           Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
           Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
           Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
           Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
                fit: BoxFit.cover),
          ),
        ],
    ));
  }
}

Flutter Row 水平布局组件

 

属性

说明

mainAxisAlignment

主轴的排序方式

crossAxisAlignment

次轴的排序方式

children

组件子元素

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,    
        crossAxisAlignment: CrossAxisAlignment.start,     //用的比较少
        children: <Widget>[
          IconContainer(Icons.search,color: Colors.blue),
          IconContainer(Icons.home,color: Colors.orange),
          IconContainer(Icons.select_all,color: Colors.red),
        ],
      ),
    );
  }
}


class IconContainer extends StatelessWidget{
  double size=32.0;
  Color color=Colors.red;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

Flutter Column 垂直布局组件

 

属性

说明

mainAxisAlignment

主轴的排序方式

crossAxisAlignment

次轴的排序方式

children

组件子元素

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      width: 400.0,
      color: Colors.pink,
      child: Column(    
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,   
        children: <Widget>[
          IconContainer(Icons.search,color: Colors.blue),
          IconContainer(Icons.home,color: Colors.orange),
          IconContainer(Icons.select_all,color: Colors.red),
        ],
      ),
    );
  }
}


class IconContainer extends StatelessWidget{
  double size=32.0;
  Color color=Colors.red;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

Flutter Expanded 类似 Web 中的 Flex 布局

Expanded 可以用在 Row 和 Column 布局中

属性

说明

flex

元素站整个父 Row /Column 的比例

child

子元素 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(    
     
        children: <Widget>[
          Expanded(
            flex: 1,
            child: IconContainer(Icons.search,color: Colors.blue)
          ),
           Expanded(
            flex: 2,
            child: IconContainer(Icons.home,color: Colors.orange),  
          ),
           Expanded(
            flex: 1,
            child: IconContainer(Icons.select_all,color: Colors.red),  
          ),
               
        ],    
    );
  }
}


class IconContainer extends StatelessWidget{
  double size=32.0;
  Color color=Colors.red;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(    
     
        children: <Widget>[
          Expanded(
            flex: 1,
            child: IconContainer(Icons.home,color: Colors.orange),  
          ),
          IconContainer(Icons.search,color: Colors.blue)
               
        ],    
    );
  }
}


class IconContainer extends StatelessWidget{
  double size=32.0;
  Color color=Colors.red;
  IconData icon;
  IconContainer(this.icon,{this.color,this.size});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white)
      ),
    );
  }
}

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        Row(
          children: <Widget>[
            Expanded(
              child:   Container(
                height: 180,
                color: Colors.yellow,
                child: Text('你好Flutter'),
              ),
            )
          ],
        ),
        SizedBox(height: 10),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover),
              )
            ),
            SizedBox(width: 10),
            Expanded(
              flex: 1,
              child: Container(
                height: 180,
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 85,
                      child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover),

                    ),
                    SizedBox(height: 10),
                    Container(
                      height: 85,
                      child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover),
                    )
                  ],
                )
              )
            ),

          ],
        )
      ],
    );
  }
}

转载于:https://www.cnblogs.com/loaderman/p/11170934.html

weixin_30764137
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter--页面布局（Transform、Baseline、Wrap、Offstage）
weixin_43846755的博客
10-11 405
目录flutter--页面布局（Transform、Baseline、Wrap、Offstage）Transform(矩阵转换)Baseline(基准线布局)Wrap(按宽高自动换行布局) flutter–页面布局（Transform、Baseline、Wrap、Offstage） Transform(矩阵转换) 作用：做矩形变换-------可以对它的child做平移、旋转、缩放等操作 主要属性表： 属性名 类型 说明 transform Matrix4 一个4*4矩阵。 orig
Flutter中的页面布局属性
wangzunkuan的博客
10-29 445
概述 本文主要对flutter中的常用的页面布局进行说明，首先说一下基本的布局及装饰组件说明： 组件名称 中文释义 说明 Align 对齐布局 指定child的对齐方式 AspectRatio 调整宽高比 根据设置的宽高比调整child组件 BaseLine 基准线布局 所有的child底部所在的同一水平线 Center 居中布局 child处于水平和垂直方向的中间位置...
Flutter Row,Column和Expanded
qq_42572245的博客
06-07 2019
1.Row class HomeContext extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( width: 300, height: 400, color: Colors.cyan,//背景颜色 child: Row( mainAxis
Flutter之页面布局
追风者
08-13 658
Column、Row、Stack以及Center之前博客有过就不赘述了 get到了一些与布局相关的组件例如 1、FractionallySizedBox class ListPage extends StatelessWidget { @override Widget build(BuildContext context) { return Column(...
Flutter--页面布局
DLUT_WJX的博客
03-08 611
Padding组件 class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.fromLTRB(0, 0, 10, 0), child: GridView.coun...
flutter页面布局一
weixin_30733003的博客
06-04 103
Padding组件 在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 该组件接收两个属性： padding ：padding 值, EdgeInsetss 设置填充的值 child ：子组件 例如，要实现前面的网...
Flutter之layout页面布局
fengyongge的专栏
03-25 1099
官方传送门： https://flutter.dev/docs/development/ui/widgets/layout flutter的layout分类 Single-child layout widgets 这种布局指父级widget中只能包含唯一一个子级widget。例如：Container容器布局，Center居中布局，Padding填充布局，Align对齐布局，FittedBox缩放布...
Flutter 内容页布局
兰叶书的博客
12-25 151
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( hom...
Flutter (十三) 页面布局 综合案例 ( 二 )
没有翅膀的我们，只是随便认为不能飞而已
06-20 342
思路 封装公用Widget，ListView的另一个用途：避免内容过长 代码： import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(title: '综合 布局', home: new LayoutDemo())); } class LayoutDemo extends Stateles...
Flutter布局
archko的专栏
08-22 445
https://flutter.io/layout/ 当你箱子约束布局遇到一些困难时,可以查看文档: Introduction Unbounded constraints Flex 介绍: 在Flutter,控件由RenderBox对象来渲染的.Render box由父节点给出约束,自己在约束范围内决定大小.约束由高宽最大最小值组成. 通常,有三类箱子,区别在于他们如何处理约束: 尽...
Flutter 基本布局
01-20
本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs 首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @
Flutter 页面布局 Wrap组件
蓝枫
02-05 548
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fl...
Flutter劫富济贫计划（二）——flutter页面布局实战
qq_38774121的博客
11-11 251
消息列表页面 这里提供两种方法完成的该消息列表 Card控件布局完成 自定义消息列表 下图只是Card布局展示，可以自己更换一下控件 代码 import 'package:flutter/material.dart'; import 'package:project/plugins/ScreenAdapter.dart'; class ChatPage extends StatelessWi...
12Flutter页面布局 AspectRatio和Cart卡片组件
weixin_30522095的博客
09-03 186
/* FlutterAspectRatio、Cart卡片组件： AspectRatio的作用是根据设置调整子元素child的宽高比。 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的。 类似于BoxFit中的contain,按照固定比率去尽量占满区域。 如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRa...
一个简单的启动页布局-Flutter
阿腾木的小世界
02-06 454
设置状态栏|启动页的布局方式
11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局
weixin_30522095的博客
09-03 324
/* Flutter 页面布局 Stack层叠组件： Stack与Align Stack与Positioned实现定位布局： Flutter Stack组件： Stack表示堆得意思，我们可以用Stack或者Stack结合Align或者Stack结合Positiond来实现页面的定位布局： alignent 配置所有子元素的显示位置。 children...
Flutter组件学习六-页面布局 Stack 层叠组件
wmd看海的博客
04-02 227
Flutter 页面布局 Stack 层叠组件使用，Stack 和Align、Stack和Positioned结合使用 1、Stack组件 1.1、属性 属性 说明 alignment 配置所有子元素的显示位置 children 子组件 1.2、代码实现 import 'package:flutter/material.dart'; class MyStackView e...
flutter 实战 之 Row 和 Column 和 Expanded 布局
最新发布
wniuniu_的博客
07-31 1408
如何利用 Column 和 Row 构造
Flutter 中GridView 嵌套 在 Flex Row Column 中不显示
05-31
这个问题可能是由于 Flex 布局的特性导致的。在使用 Flex 布局的时候，子控件会自动根据剩余空间进行调整。而 GridView 作为一个滚动控件，通常是需要占满整个屏幕的，而不是根据剩余空间进行调整的。 解决这个问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值