1. Toy模板网首页
  2. > Toy博客

Flutter基础布局

9月前 作者：举儿 分类：Toy博客 阅读(85) 违法举报

这篇具有很好参考价值的文章主要介绍了Flutter基础布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Column:纵向布局

Flutter基础布局,Flutter,flutter

 Column相当于Android原生的LinearLayout线性布局。

主要代码：

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: const Column(
        //start:主轴容器内起始位排列
        //end:主轴容器内结束位排列
        //center:主轴容器内居中排列
        //spaceBetween:主轴容器内均匀排列（顶部底部无间距，间距相等）
        //spaceAround:主轴容器内相同间隔分布（顶部底部间距相等，控件之间间距相等）
        //spaceEvenly:主轴容器内等距离分布（顶部底部同等间距，间距相等）
        mainAxisAlignment: MainAxisAlignment.center,
        //start:横轴容器内起始位排列
        //end:横轴容器内结束位排列
        //center:横轴容器内居中排列
        //stretch:横轴容器内拉伸排列
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconContainer(Icons.home),
          IconContainer(Icons.search, color: Colors.yellow),
          IconContainer(Icons.ac_unit, color: Colors.orange)
        ],
      ),
    );
  }
}

mainAxisAlignment和crossAxisAlignment属性用于控制排列位置与控件之间距离。

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: const Column(
        //start:主轴容器内起始位排列
        //end:主轴容器内结束位排列
        //center:主轴容器内居中排列
        //spaceBetween:主轴容器内均匀排列（顶部底部无间距，间距相等）
        //spaceAround:主轴容器内相同间隔分布（顶部底部间距相等，控件之间间距相等）
        //spaceEvenly:主轴容器内等距离分布（顶部底部同等间距，间距相等）
        mainAxisAlignment: MainAxisAlignment.center,
        //start:横轴容器内起始位排列
        //end:横轴容器内结束位排列
        //center:横轴容器内居中排列
        //stretch:横轴容器内拉伸排列
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconContainer(Icons.home),
          IconContainer(Icons.search, color: Colors.yellow),
          IconContainer(Icons.ac_unit, color: Colors.orange)
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  final Color color;
  final IconData icon;

  const IconContainer(this.icon, {Key? key, this.color = Colors.red})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      color: color,
      child: Icon(icon, color: Colors.white, size: 28),
    );
  }
}

Row:横向布局

Flutter基础布局,Flutter,flutter

 主要代码：

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconContainer(Icons.home),
          IconContainer(Icons.search, color: Colors.yellow),
          IconContainer(Icons.ac_unit, color: Colors.orange)
        ],
      ),
    );
  }
}

Row和Column相对应，Row横向依次排列容器内的内容，Column纵向依次排列容器内的内容。属性介绍参考Column。

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconContainer(Icons.home),
          IconContainer(Icons.search, color: Colors.yellow),
          IconContainer(Icons.ac_unit, color: Colors.orange)
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  final Color color;
  final IconData icon;

  const IconContainer(this.icon, {Key? key, this.color = Colors.red})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      color: color,
      child: Icon(icon, color: Colors.white, size: 28),
    );
  }
}

Expanded

Flutter基础布局,Flutter,flutter

Expanded相当于Android原生的权重。

主要代码：

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home),
        ),
        Expanded(
          flex: 3,
          child: IconContainer(
            Icons.ac_unit,
            color: Colors.orange,
          ),
        ),
        Expanded(
          flex: 3,
          child: IconContainer(
            Icons.android,
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}

flex属性相当于Android原生的layout_weight权重属性。

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Expanded(
          flex: 1,
          child: IconContainer(Icons.home),
        ),
        Expanded(
          flex: 3,
          child: IconContainer(
            Icons.ac_unit,
            color: Colors.orange,
          ),
        ),
        Expanded(
          flex: 3,
          child: IconContainer(
            Icons.android,
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  final Color color;
  final IconData icon;

  const IconContainer(this.icon, {Key? key, this.color = Colors.red})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 100,
      color: color,
      child: Icon(
        icon,
        color: Colors.white,
        size: 28,
      ),
    );
  }
}

SizedBox

Flutter基础布局,Flutter,flutter

 SizedBox容器和Container容器类似，都可以用来装载控件，只是自带属性不一样，可以根据布局视情况而定。

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        SizedBox(
          width: double.infinity,
          height: 200,
          //设置网络图片
          child: Image.network(
            "https://www.itying.com/images/flutter/1.png",
            //fill:拉伸填充，父容器无留白，图片变形
            //contain:容纳，父容器有留白
            //cover:剪裁填充，父容器无留白
            //fitWidth:横向剪裁填充，可能有留白
            //fitHeight:纵向剪裁填充，可能有留白
            //none:全无，剪裁，可能有留白
            //不设置此属性:不剪裁，有留白
            //scaleDown:按比例缩放，有留白
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(height: 2),
        Row(
          children: [
            Expanded(
              flex: 3,
              child: SizedBox(
                height: 180,
                child: Image.network(
                  "https://www.itying.com/images/flutter/2.png",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              width: 2,
            ),
            Expanded(
              flex: 1,
              child: SizedBox(
                height: 180,
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Image.network(
                        "https://www.itying.com/images/flutter/3.png",
                        fit: BoxFit.cover,
                      ),
                    ),
                    Container(
                      height: 2,
                    ),
                    Expanded(
                      flex: 1,
                      child: Image.network(
                        "https://www.itying.com/images/flutter/4.png",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        )
      ],
    );
  }
}

Image.network中的fit属性相当于ImageView中的scaleType属性，具体用法请看上面代码注释或者看源码注释。

Stack

Flutter基础布局,Flutter,flutter

完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Stack:堆叠，相当Android原生的帧布局
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: double.infinity,
          height: 300,
          color: Colors.green,
        ),
        Container(
          width: 200,
          height: 200,
          color: Colors.red,
        ),
        const Text("你好Flutter")
      ],
    );
  }
}

Stack:堆叠，相当Android原生的FrameLayout帧布局。

Positioned

Flutter基础布局,Flutter,flutter

 Positioned:定位布局相当于Android原生中的RelativeLayout相对布局。

 完整代码：文章来源地址https://www.toymoban.com/news/detail-541786.html

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 300,
      color: Colors.red,
      //Stack:堆叠
      child: Stack(
        children: [
          //Positioned:定位
          Positioned(
            left: 0,
            bottom: 0,
            child: Container(width: 100, height: 100, color: Colors.green),
          ),
          const Positioned(left: 0, bottom: 0, child: Text("你好Flutter"))
        ],
      ),
    );
  }
}

到了这里，关于Flutter基础布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Flutter 笔记 | Flutter 核心原理（三）布局（Layout ）过程

    Flutter 笔记 | Flutter 核心原理（三）布局（Layout ）过程

    Layout（布局）过程主要是确定每一个组件的布局信息（大小和位置），Flutter 的布局过程如下： 父节点向子节点传递约束（constraints）信息，限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小（size）。 父节点根据特定布局规则（不同布局组件会有不同的布

    2024年02月09日
    浏览(89)
  • Flutter学习之旅 -网格布局

    Flutter学习之旅 -网格布局

    GridView列表三种形式 可以通过 GridView.count 实现网格布局 可以通过 GridView.extent 实现网格布局 可以通过 GridView.builder 实现网格布局 参数:可以通过 SliveGridDelegateWithFiexdCrossAxisCount 来设置 GridView.count 参数: 可以通过 SliveGridDelegateWithMaxCrossAxisExtent 来设置 GridView.extent 常用属性 名称

    2024年02月03日
    浏览(55)

  • flutter 常用布局方式

    单子 Widget是指只有一个子组件的Widget，这样布局Widget有三个：Container、Padding、Center Container，是一种允许在其内部添加其他控件的控件，也是 UI 框架中的一个常见概念。 在 Flutter 中，Container 本身可以单独作为控件存在（比如单独设置背景色、宽高），也可以作为其他控件的

    2024年02月08日
    浏览(40)
  • Flutter 布局详解

    Flutter 布局详解

    本文主要介绍了Flutter布局相关的内容，对相关知识点进行了梳理，并从实际例子触发，进一步讲解该如何去进行布局。 Flutter 布局详解 Flutter 布局（一）- Container详解 Flutter 布局（二）- Padding、Align、Center详解 Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解 Flutter 布局

    2024年02月04日
    浏览(56)
  • flutter 网格布局Gridview

    flutter 网格布局Gridview

    可以创建网格列表视图；主要通过Count、extent、custom、builder构造列表。有内边距、是否反向、滑动控制器等属性。 四个属性使用场景，Count、extent、custom适用于子布局较少时使用。可能会用到上拉刷新，数据较多时，则使用builder属性,其中count和builder使用较多 GridView.count 接收

    2023年04月11日
    浏览(34)
  • Flutter 布局（一）- Container详解

    Flutter 布局（一）- Container详解

    本文主要介绍Flutter中非常常见的Container，列举了一些实际例子介绍如何使用。 Flutter 布局详解 Flutter 布局（一）- Container详解 Flutter 布局（二）- Padding、Align、Center详解 Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解 Flutter 布局（四）- Baseline、FractionallySizedBox、Intrins

    2024年02月04日
    浏览(39)
  • Flutter 滚动布局：sliver模型

    Flutter 滚动布局：sliver模型

    一、滚动布局 Flutter中可滚动布局基本都来自 Sliver 模型，原理和安卓传统UI的ListView、RecyclerView类似，滚动布局里面的每个子组件的样式往往是相同的，由于组件占用内存较大，所以在内存上我们可以缓存有限个组件，滚动布局时仅仅刷新组件的数据，来达到滚动布局存放无

    2024年01月23日
    浏览(41)
  • Flutter 实现按位置大小比例布局的控件

    Flutter 实现按位置大小比例布局的控件

    做视频监控项目时需要需要展示多分屏，比如2x2、3x3、414等等，如果每一种分屏都单独实现会很麻烦，而且不能支持用户定制。最好的方式还是实现一个通用的分屏容器，而且采样比例计算位置大小，可以适配任意尺寸。 最直观的实现方式是获取控件宽高然后按比例计算，但

    2024年02月13日
    浏览(42)
  • android studio使用Flutter Inspector调试布局

    android studio使用Flutter Inspector调试布局

    1、点击anroid studio右侧的Flutter Inspector按钮 2、点击展开布局右上角的‘Select Widget  Mode’，即可实现点击相关节点，真机上可以看到相关的方框 如下图  

    2024年02月13日
    浏览(42)

  • flutter 使用Bloc+PageView+BottomNavigationBar实现传统首页布局

    本篇文章主要记录首页框架搭配bloc的使用示例，本篇文章将会使用上一篇文章中的代码，有兴趣的朋友可以去参考一下实现，除了使用pageview还有另外一种实现，但是最后发现那种方式有两个问题，一个是进入首页后会加载所有PageWidget，第二个是每次切换PageWidget时都会走一

    2024年02月15日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包