RelativeLayout在flutter体现

最新推荐文章于 2024-08-31 01:25:54 发布

涂文远

最新推荐文章于 2024-08-31 01:25:54 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.csdn.net/daividtu/article/details/106574724

Flutter 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了如何在Flutter中实现类似Android的RelativeLayout布局，通过Stack组件进行组件堆叠，达到灵活的界面排列效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

android flutter

FrameLayout/RelativeLayout ---------------------------------- Stack

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff00">
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#ff0000"
        android:layout_centerInParent="true"/>
    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#0000ff"
        android:layout_centerInParent="true"/>
    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#000000"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"/>
</RelativeLayout>

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffffff00),
      child: Stack(
        alignment: AlignmentDirectional.center,
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Color(0xffff0000),
          ),
          Container(
            width: 50,
            height: 50,
            color: Color(0xff0000ff),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 50,
                  height: 50,
                  color: Color(0xff000000),
                  margin: const EdgeInsets.only(bottom: 50.0),
                ),
                SizedBox(
                  height: 50.0,
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}