我想將文本對齊到影像的中心，并想在影像中添加一些顏色疊加，以使它們在FLUTTER中更暗

這就是我想做的

我有這個代碼我想對齊它，但它沒有在影像的中心對齊

import 'package:flutter/material.dart';
import 'package:sayahat/Widgets/space.dart';

這是圖片網址串列

List stateList = [
  "https://images.unsplash.com/photo-1623082691619-f6cacbdaffa5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1228&q=80",
  "https://images.unsplash.com/photo-1623654197341-a6796eb44591?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
  "https://images.unsplash.com/photo-1579762492894-01b8232f7d45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
  "https://images.unsplash.com/photo-1596464148416-e0916276a9f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
  "https://images.unsplash.com/photo-1562913346-61ae3ab9277e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
  "https://images.unsplash.com/photo-1598091383021-15ddea10925d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
];

這是我想要在影像中心的文本串列

List stateTitle = [
  "Punjab",
  "Sindh",
  "Balochistan",
  "KPK",
  "Gilgit Baltistan",
  "Azad Kashmir"
];

這是無狀態小部件

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        child: ListView.builder(
          itemBuilder: (BuildContext ctx, int index) {
            return Container(
              padding: EdgeInsets.all(10),

我正在使用 Inkwell，因為我想在它點擊時導航它

              child: InkWell(
                child: Stack(
                  children: [
                    Image.network(stateList[index]),
                    Text(
                      stateTitle[index].toUpperCase(),
                      style: TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.w600),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),

                overlayColor: MaterialStateProperty.all(Colors.blue),
                // borderRadius: BorderRadius.all(Radius.circular(20)),

                // radius: 200.0,
                onTap: () {},
              ),
            );
          },
          itemCount: stateList.length,
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

最優雅的方式。

您可以簡單地使用中alignment存在的選項Stack

child: Stack(
  alignment: Alignment.center
)

或者

Stack 允許您將元素堆疊在一起，陣列中的最后一個元素具有最高優先級。您可以使用 Align、Positioned 或 Container 來定位堆疊的子項。

對齊

與 Alignment 對齊，它具有諸如 top center、bottomRight 等靜態屬性。或者您可以完全控制并設定 Alignment(5.0, -5.0)，它的 x,y 值范圍從 5.0 到 -5.0，其中 (0,0) 是螢屏的中心。

Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        ),
        Container(
          alignment: Alignment.bottomCenter,
          // alignment: Alignment(1.0, -1.0),
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        )
      ]
  )

uj5u.com熱心網友回復：

在StackWidget 中使用這個屬性：alignment: Alignment.center,

Stack(
      alignment: Alignment.center,
         ...
       )

同樣對于較暗的影像，我想它很有用：

 Image.network(src,
            color: Colors.black.withOpacity(0.2),
            ),

您可以.withOpacity()從 (0.0)更改為 (0.9)

標籤：

上一篇：使用日期（國際）時For回圈中的Dart/Flutter錯誤

下一篇：如何檢查表中的記錄是否也存在于另一個表中或不存在于MYSQL中