如何在Flutter中固定高度的容器內垂直居中文本小部件

我想在具有固定高度的容器內垂直居中文本小部件。但是，我想保持容器的寬度動態，這將根據文本的長度而變化。我嘗試在 Text 小部件和父容器小部件上使用 Center 和 Align，但它沿整個寬度擴展。需要注意的一點 Container 位于另一個 Column 內。

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Text(
        name,
        style: textStyle,
      ),
    );
  }
}

這是實際的結果

這是期望的結果

我不想使用垂直填充來居中文本

uj5u.com熱心網友回復：

您可以將文本包裝在一個Column將占用整個容器大小的文本中，然后您可以使用mainAxisAlignment它來居中

child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        name,
        style: textStyle,
      ),
    ],
  ),

uj5u.com熱心網友回復：

你可以把你的Text小部件包裹在里面，Column然后設定mainAxisAlignment為中心，如下所示：

child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            name,
            style: textStyle,
          ),
        ],
      ),

有關作業示例，請參見：

uj5u.com熱心網友回復：

嘗試以下代碼并設定alignment: Alignment.center,為您的容器。

Container(
      alignment: Alignment.center,
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius: const BorderRadius.all(Radius.circular(15)),
      ),
      child:  Text(
          'Button',
          style: TextStyle(),
          
      ),
    );

使用列的其他方式

Container(
  alignment: Alignment.center,
  height: MediaQuery.of(context).size.height * 0.2,
  decoration: BoxDecoration(
    color: Color(0xFFE2D9FB),
    borderRadius: const BorderRadius.all(Radius.circular(15)),
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Button',
        style: TextStyle(),
      ),
    ],
  ),
);

參考

uj5u.com熱心網友回復：

您可以輕松簡單地嘗試以下代碼

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.2,
          decoration: BoxDecoration(
            color: Color(0xFFE2D9FB),
            borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                name,
                textAlign: TextAlign.center,
                style: textStyle,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

您應該放置一個帶有引數“mainAxisAlignment：MainAxisAlignment.center”的列，它將所有小部件居中...像這樣：

import 'package:flutter/material.dart';

class CustomIconButton extends StatelessWidget {
  final String name;
  final Function()? onTap;
  final TextStyle? textStyle;
  final BorderRadius? borderRadius;
  const CustomIconButton({
    Key? key,
    required this.name,
    this.onTap,
    this.textStyle,
    this.borderRadius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            name,
            style: textStyle,
          ),
        ],
      ),
    );
  }
}

uj5u.com熱心網友回復：

試試這個：

return Container(
      height: MediaQuery.of(context).size.height * 0.2,
      width: MediaQuery.of(context).size.width * name.length/50,
      decoration: BoxDecoration(
        color: Color(0xFFE2D9FB),
        borderRadius:
            borderRadius ?? const BorderRadius.all(Radius.circular(15)),
      ),
      child: Center(
        child: Text(
          name,
          style: textStyle,
        ),
      ),
    );

名稱：“按鈕”

名稱：“按鈕按鈕按鈕”

標籤：扑 镖 颤振布局 颤动文本 颤振容器

上一篇：在Flutter的串列視圖底部添加一個專案

下一篇：SingleChildScrollView內的列內的ListView.builder