flutter使用Positioned将控件定位到底部中间

2023-12-20 19:01:09

在这里插入图片描述

场景描述

要将Positioned定位到屏幕底部中间的位置,你可以使用MediaQuery来获取屏幕的高度,然后设置Positioned的bottom属性和left或right属性,一般我们left和right都会设置一个值让控制置于合适的位置,那么如何使其位于底部中央?

示例

以下是一个示例代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Positioned Example'),
        ),
        body: MyPositionedWidget(),
      ),
    );
  }
}

class MyPositionedWidget extends StatelessWidget {
  
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    return Stack(
      children: [
        // Your main content goes here
        Center(
          child: Text(
            'Main Content',
            style: TextStyle(fontSize: 20),
          ),
        ),

        // Positioned at the bottom center
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 50,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Positioned at the bottom center',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

解释

在这个例子中,Positioned包含一个具有蓝色背景的Container,该Container位于屏幕的底部中央。bottom: 0确保它位于屏幕底部,而left: 0和right: 0使其水平方向上充满整个屏幕宽度。你可以根据需要调整高度、颜色和内容。


结束语
Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!

文章来源:https://blog.csdn.net/yikezhuixun/article/details/134997242
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。