Flutter Row组件实战案例

In this section, we’ll continue our exploration by combining the Row and Container widgets to create more complex layouts. Let’s dive in!

在本节中,我们将继续探索,结合“Row”和“Container”小部件来创建更复杂的布局。让我们开始吧!

Scenario: Creating a Row of Colored Boxes

场景:创建一排彩色盒子

Imagine you’re designing a dashboard for a productivity app. You want to display quick access buttons in a row, each represented by a colored box. Here’s how you can achieve this using the Row and Container widgets:

想象一下,你正在为一个生产力应用程序设计一个仪表板。你希望将快速访问按钮排成一行,每个按钮由一个彩色框表示。以下是如何使用“行”和“容器”小部件实现这一点:

Step 1: Set Up Your Project

步骤1:设置你的项目

Create a new Flutter project.

创建一个新的Flutter项目。

Open the main.dart file in your project.

打开项目中的main.dart文件。

Step 2: Add the Row with Containers

步骤2:用容器添加行

Replace the default code in your main.dart file with the following:

替换main中的默认代码。Dart文件包含以下内容:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(title: '第一个APP',home: Scaffold(appBar: AppBar(title: const Text("文本组件, 导航标题"),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: 100, height: 100, color: Colors.blue),const SizedBox(width: 20),Container(width: 100, height: 100, color: Colors.green),const SizedBox(width: 20),Container(width: 100, height: 100, color: Colors.red),],)),),);}
}

在这里插入图片描述

Step 3: Run Your App

步骤3:运行应用程序

Save your changes and run your Flutter app using the command:

保存更改并使用以下命令运行Flutter应用程序:

flutter run

You’ll see three colored boxes displayed in a row at the center of the screen.

您将在屏幕中央看到排成一行的三个彩色框。

Step 4: Adjust Container Colors

步骤4:调整容器颜色

Now, let’s customize the colors of the boxes. Change the color property values of the Container widgets to experiment with different colors. For example, you can use Colors.red, Colors.purple, and Colors.teal for the boxes.

现在,让我们自定义框的颜色。更改Container小部件的颜色属性值,以尝试不同的颜色。例如,您可以使用颜色。红色,颜色。紫色和颜色。箱子是蓝绿色的。

Step 5: Run Your App

第五步:运行你的应用

Save your changes and run your Flutter app using the command:

保存更改并使用以下命令运行Flutter应用程序:

flutter run

What do you see? Magic!

你看到了什么?魔法!

Explanation

解释

In this scenario, we’ve combined the Row widget with the Container widgets to create a row of colored boxes. Each Container represents a quick access button with a specific color. We’ve used the color property of the Container to define the background color of each box. The SizedBox widgets with a width of 20 pixels provide spacing between the boxes.

在这个场景中,我们将“Row”小部件与“Container”小部件组合在一起,创建了一行彩色框。每个“容器”代表一个具有特定颜色的快速访问按钮。我们使用Container的color属性来定义每个盒子的背景颜色。“SizedBox”小部件的宽度为20像素,提供框之间的间距。

Congratulations! You’ve successfully used the Row widget to create a horizontal arrangement of widgets. You don’t need to worry about concepts like StatelessWidget or StatefulWidget for now. As you continue your Flutter journey, you’ll gradually dive deeper into these topics.

恭喜你!您已经成功地使用Row小部件创建了小部件的水平排列。您现在不需要担心StatelessWidget或statfulwidget之类的概念。当你继续你的Flutter之旅,你会逐渐深入到这些主题。

By combining different layout widgets like Row and Container, you can create more intricate and visually appealing UIs. Don’t hesitate to experiment with various properties to achieve the desired look and functionality.

通过组合不同的布局小部件,如“行”和“容器”,您可以创建更复杂和视觉上吸引人的ui。不要犹豫,尝试各种属性来实现所需的外观和功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/883795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bash、sh 和 Shell都弄混了?

在Linux和Unix系统中&#xff0c;Bash、sh 和 Shell 都与命令行解释器相关&#xff0c;但它们各自的含义和作用略有不同。以下是它们之间的关系和区别&#xff1a; Shell Shell 是一个通用术语&#xff0c;指的是操作系统中负责解释和执行用户命令的程序。它是用户与操作系统…

已解决Navicat 选择Mysql表 报错unkonow internal error: Access violation - no RTTI data

已解决Navicat 选择Mysql表 报错unkonow internal error&#xff1a; Access violation - no RTTI data 报错信息截图&#xff1a; 使用Navicat Premium15 选择sql server表时 出现大量弹窗报错&#xff0c;导致sql文件执行不了&#xff0c;右键数据库执行外部文件也失败了。弹…

Python日志系统详解:Logging模块最佳实践

Python日志系统详解&#xff1a;Logging模块最佳实践 在开发Python应用程序时&#xff0c;日志记录是排查问题、监控系统状态、优化性能的重要手段。Python标准库中提供了强大的logging模块&#xff0c;使开发者可以轻松实现灵活的日志系统。本文将详细介绍Python的logging模块…

Kubernetes:(二)K8Sv1.20二进制部署

文章目录 一、k8s项目架构二、二进制搭建 Kubernetes v1.20 &#xff08;单master节点&#xff09;1.操作系统初始化配置2.部署 docker引擎3. etcd的概念4. 证书认证5. node01 节点操作&#xff08;192.168.44.10&#xff09;6. node02 节点操作&#xff08;192.168.44.40&…

arcgis pro 3.3.1安装教程

一、获取方式&#xff1a; http://dt4.8tupian.net/2/29913a61b1500.pg3二、软件目录&#xff1a; 三、安装步骤&#xff1a; &#xff08;1&#xff09;安装软件运行环境windowsdesktop-runtime 8.0.4; &#xff08;2&#xff09;选中安装文件arcgispro_33zh_cn_190127.exe&…

uniapp app.onshow 和 onMounted一样用吗

在uni-app中&#xff0c;onShow和onMounted并不完全相同&#xff0c;它们分别属于应用生命周期和组件生命周期。‌ 应用生命周期中的onShow 在uni-app中&#xff0c;onShow是应用生命周期的一部分&#xff0c;它会在应用启动或从后台进入前台时触发。这意味着它不仅仅局限于页…

leetcode hot100【LeetCode 543. 二叉树的直径】java实现

LeetCode 543. 二叉树的直径 题目描述 给定一棵二叉树&#xff0c;你需要计算它的直径长度。一棵二叉树的直径长度是任意两个结点路径长度中的最大值。这条路径可能穿过也可能不穿过根结点。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,4,5] 输出&#xff1a;3 解释…

nfs作业

服务机 配置文件内容 客户机

QT实时显示日志内容

性能有待提高&#xff1b; 能够读取指定目录下的日志文件&#xff0c;显示在下拉框中。 选择某一个日志之后&#xff0c;点击获取数据按钮&#xff0c;能够实时刷新日志内容。 但是每次刷新都会对整个文件进行读取&#xff0c;文本框重新加载文本。效率很低&#xff0c;影响性能…

基于yolov8的布匹缺陷检测系统,支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 基于yolov8的布匹缺陷检测系统&#xff0c;支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov8的布匹缺陷检测系统是在 PyTo…

着色器的认识

知识了解&#xff1a; 着色器&#xff1a; 顶点着色器: 用来描述顶点的特性,如位置、颜色等&#xff0c;其中&#xff0c;顶点&#xff1a;是指二维或三维空间中的一个点比如交点或者端点。 片元着色器&#xff1a;用来进行逐片元处理操作&#xff0c;比如光照、颜色叠加等&…

从零搭建开源陪诊系统:关键技术栈与架构设计

构建一个开源陪诊系统是一个涉及多种技术的复杂工程。为了让这个系统具备高效、可靠和可扩展的特点&#xff0c;我们需要从架构设计、技术栈选择到代码实现等方面进行全面的考量。本文将从零开始&#xff0c;详细介绍搭建开源陪诊系统的关键技术栈和架构设计&#xff0c;并提供…

(二十三)、k8s(minikube) 部署mysql

文章目录 1、安装1.1、环境1.2、workbench 崩溃问题1.1、deployment.yaml 文件1.2、运行1.3、启动隧道&#xff0c;从宿主机直接访问 k8s 中的mysql 2、完整卸载 mysql&#xff08;pod/deployment/service/pvc&#xff09; 1、安装 1.1、环境 docker 部署 minikube,minikube …

CSS3新增长度单位

CSS3新增长度单位 rem&#xff1a;根元素字体的倍数&#xff0c;只与根元素字体大小有关&#xff1b;vw&#xff1a;占视口宽度的百分比&#xff1b;vh&#xff1a;占视口高度的百分比&#xff1b;vmax&#xff1a;占视口中宽和高最大的百分比&#xff1b;vmin&#xff1a;占视…

react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址 代码示例 import React, { Component } from react import { createRoot } from react-dom/clientimport SignaturePad from ../../src/index.tsximport * as styles from ./styles.module.cssclass App extends Component {state { trimmed…

Kafka 解决消息丢失、乱序与重复消费

一、引言 在分布式系统中&#xff0c;Apache Kafka 作为一种高吞吐量的分布式发布订阅消息系统&#xff0c;被广泛应用于日志收集、流式处理、消息队列等场景。然而&#xff0c;在实际使用过程中&#xff0c;可能会遇到消息丢失、乱序、重复消费等问题&#xff0c;这些问题可能…

Java知识巩固(十二)

I/O JavaIO流了解吗&#xff1f; IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因…

中间件安全(三)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 本文主要讲解apache命令执行漏洞&#xff08;cve_2021_41773&#xff09;。 靶场链接&#xff1a;Vulfocus 漏洞威胁分析平台 一&#xff0c;漏洞简介。 cve_2021_41773漏洞…

工欲善其事必先利其器——Anaconda安装教程(2024版本)

前言 在数据科学、机器学习、科学计算等领域&#xff0c;Python 因其简洁的语法和强大的库支持而广受欢迎。Anaconda 是一个流行的Python发行版&#xff0c;它包含了大量的科学计算和数据分析库&#xff0c;极大地方便了开发者和研究者的工作。本文将为您提供2024版本的Anacon…

ctfshow(155->158)--文件上传漏洞--绕过黑名单

Web155 进入界面&#xff1a; 审计&#xff1a; 前端校验&#xff1a;限制传入文件的后缀为.png MIME验证 黑名单过滤 思路/EXP&#xff1a; 先上传.user.ini文件&#xff1a; 将.user.ini.png文件上传&#xff0c;然后抓包去掉.png后缀&#xff0c;就同时绕过了前端校验…