主頁 > 企業開發 > 如何在Flutter中將內容容器居中,就像CSS中的“最大寬度”容器一樣?

如何在Flutter中將內容容器居中,就像CSS中的“最大寬度”容器一樣?

2022-05-28 03:36:31 企業開發

如何在 Flutter 中制作像這樣的居中內容容器?:

.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    background-color: red;
    height: 100vh;
}
<div class="container">
    Hello inside container
</div>


我已經嘗試過了,但是一旦應用程式小于 maxWidth,它就會溢位而不是適應螢屏的寬度。

import "package:flutter/material.dart";

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Theme.of(context).colorScheme.background,
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              color: Colors.red,
              constraints: const BoxConstraints(maxWidth: 800),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    "Hello inside container",
                    style: TextStyle(fontSize: 40),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

uj5u.com熱心網友回復:

試試下面的代碼包裝你的Column內部ExpandedFlexible

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Container(
          width: double.infinity,
          color: Colors.red,
          constraints: const BoxConstraints(maxWidth: 800),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                "Hello inside container",
                style: TextStyle(fontSize: 40),
              ),
            ],
          ),
        ),
      ),
    ],
  ),

uj5u.com熱心網友回復:

您可以MediaQuery.of(context).size.width用作寬度。它為您提供整個螢屏寬度。限制 Flutter 中容器的最大寬度看看這個。

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/481796.html

標籤:html css

上一篇:我正在嘗試在.leaf類上應用margin-top但margin也適用于它的父級我只想將margin-top應用到.leaf類?

下一篇:返回列表

標籤雲
其他(140652) Python(33693) JavaScript(21488) Java(15669) C(13909) 區塊鏈(8222) AI(7469) C#(6713) 爪哇(6325) 基礎類(6313) MySQL(6185) html(5766) 熊猫(5308) sql(5289) PHP(5196) 腳本語言(PerlPython)(5129) 非技術區(4971) Linux(4849) 数组(4834) R(4643) Android(4340) 反应(4317) 数据框(3722) css(3673) 节点.js(3410) C語言(3288) C++語言(3117) json(2818) Java相關(2746) 列表(2728) 疑難問題(2699) 安卓(2620) 扑(2612) 打字稿(2538) VBA(2514) 單片機工控(2479) 细绳(2189) ASP.NET(2131) iOS(2104) MongoDB(2001) Web開發(1951) 字典(1938) 麻木的(1909) 正则表达式(1907) 循环(1902) 擅长(1833) 镖(1828) 迅速(1796) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) VB基礎類(1755) .NETCore(1740) Unity3D(1691) 功能(1680) C++(1660) 開發(1646) .NET技术(1638) 系統維護與使用區(1617) 弹簧靴(1606)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布