Flutter布局模型之层叠定位

2024-10-06 22:03:18

Stack即层叠布局控件，能够将子控件层叠排列。

Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   appBar: new AppBar(
    title: new Text('层叠定位布局'),
   ),
   body:new Center(
    child: new Stack(
     children: <Widget>[
      new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
      new Positioned(
       left: 35.0,
       right: 35.0,
       top: 45.0,
       child: new Text(
        'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
        style: new TextStyle(
         fontSize: 20.0,
         fontFamily: 'serif',
        ),
       ),
      ),
     ]
    ),
   ),
  );
 }
}
void main() {
 runApp(
  new MaterialApp(
   title: 'Flutter教程',
   home: new LayoutDemo(),
  ),
 );
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Flutter路由的跳转、动画和传参详解（最简单）

路由做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte
Flutter实现底部导航栏效果

大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码一.在main.dart文件中定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new
Flutter进阶之实现动画效果（一）

上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui
Flutter Android端启动白屏问题的解决

问题描述 Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象,白屏的时长由设备的性能决定,设备性能越差,白屏时间越长. 问题分析其实启动白屏的问题在Android原生应用上也是一个常见问题,大致是因为从用户点击 Launcher Icon 到应用首页显示之间,Android 系统在完成应用的初始化工作,其流程如下: 在 Flutter Android 端上,白屏的问题会更加严重,因为除了 Android 应用启动耗时外,还增加了 Flutter 初始化耗时. 直到 Fl
Flutter常用的布局和事件示例详解

Flutter 项目中常用的布局详情,及封装和使用,快速开发项目. 以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar,//标题栏 this.body,//内容 this.floatingActionButton,//悬浮按钮 this.persistentFooterButtons,//底部持久化现实按钮 this.drawer,//侧滑菜单
Flutter质感设计之弹出菜单

PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends StatefulWidget { @override _MenusDemoState createState() => new _MenusDemoState(); } class _MenusDemoState extends State<MenusDemo> { String _body
Flutter中ListView 的使用示例

这个小例子使用的是豆瓣 API 中正在上映的电影的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析网络请求加载菊花要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a
Flutter质感设计之持久底部面板

持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { @override _MyApp createState() => new _MyApp(); } class _MyApp extends S
flutter实现仿boss直聘功能

Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能构建高性能.高保真的iOS和Android应用程序,并且在排版.图标.滚动.点击等方面实现零差异. 2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou. 这次flutter来了,想感受一下,索性用目前flutter的版本写的一个仿boss直聘应用. 时间有限,没完全仿照,去掉了一些功能,但是界面风格一致,有参考价值. github地址:flutter仿boss直聘. 感悟与
Flutter质感设计之底部导航

BottomNavigationBar即底部导航栏控件.显示在应用底部的质感设计控件,用于在少量视图中切换.底部导航栏包含多个以标签.图标或两者搭配的形式显示在项目底部的项目,提供了应用程序的顶级视图之间的快速导航.对于较大的屏幕,侧面导航可能更好. 创建navigation_icon_view.dart文件,定义一个NavigationIconView类,用于管理BottomNavigationBarItem(底部导航栏项目)控件的样式.行为与动画. import 'package:flutt

Flutter布局模型之层叠定位

相关推荐

随机推荐