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,一经查实,立即删除!

相关文章

已解决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&…

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;并提供…

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…

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;就同时绕过了前端校验…

第7次CCF CSP认证真题解

1、折点计数 题目链接&#xff1a;https://sim.csp.thusaac.com/contest/7/problem/0 100分代码&#xff1a; #include <iostream> using namespace std; int main(int argc, char *argv[]) {int n;cin >> n;int a[1010];for(int i 0; i < n; i){cin >&g…

我谈Canny算子

在Canny算子的论文中&#xff0c;提出了好的边缘检测算子应满足三点&#xff1a;①检测错误率低——尽可能多地查找出图像中的实际边缘&#xff0c;边缘的误检率&#xff08;将边缘识别为非边缘&#xff09;低&#xff0c;且避免噪声产生虚假边缘&#xff08;将非边缘识别为边缘…

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机&#xff0c;命名TIM 2、配置单片机 1.打开USART1&#xff0c;方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…

三款计算服务器配置→如何选择科学计算服务器?

科学计算在众多领域都扮演着关键角色&#xff0c;无论是基础科学研究还是实际工程应用&#xff0c;强大的计算能力都是不可或缺的。而选择一台合适的科学计算服务器&#xff0c;对于确保科研和工作的顺利进行至关重要。 首先&#xff0c;明确自身需求是重中之重。要仔细考虑计算…

【SSM详细教程】-14-SpringAop超详细讲解

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

Go 1.19.4 命令调用、日志、包管理、反射-Day 17

1. 系统命令调用 所谓的命令调用&#xff0c;就是通过os&#xff0c;找到系统中编译好的可执行文件&#xff0c;然后加载到内存中&#xff0c;变成进程。 1.1 exec.LookPath&#xff08;寻找命令&#xff09; 作用&#xff1a; exec.LookPath 函数用于在系统的环境变量中搜索可…