flutter - 颤振：使用中心小部件覆盖最小宽度

问题描述

我想在容器内居中放置一些文本。容器具有最小/最大宽度约束。但是，当我用中心包裹文本时，无论文本的长度如何，容器都会最大化其宽度。当文本较少/没有文本时，容器宽度不会缩小到其最小尺寸。

这是代码

import 'package:flutter/material.dart';
import './constants.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    devHeight = MediaQuery.of(context).size.height; //from constants.dart
    devWidth = MediaQuery.of(context).size.width; //from constants.dart

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.greenAccent,
      ),
      body: Container(
        color: Colors.blueGrey[400],
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            MyCard(),
          ],
        ),
      ),
    );
  }
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(devHeight * 0.03),
      ),
      elevation: 3,
      child: Column(
        children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(4),
                child: Container(
                  height: devHeight * 0.05,
                  decoration: BoxDecoration(
                    color: Colors.greenAccent,
                    border: Border.all(),
                    borderRadius: BorderRadius.circular(99999),
                  ),
                  constraints: BoxConstraints(
                    minWidth: 100,
                    maxWidth: 200,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(2),
                    child: Center(
                      child: Text(
                        'asdf asdf'.toUpperCase(),
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

使用 Align 而不是 center 包装文本也不起作用，向容器添加对齐属性也不起作用。

标签： flutterdart

解决方案

所以有两种方法可以解决这个问题。第一个有点草率，但可能是必需的。发生这种情况的原因是因为基本上中心小部件想要扩展至其最大潜力并将占据整个空间。您尝试的任何对齐属性都会发生这种情况

使用mainaxisalignment使文本居中的列

 Padding(
   padding: const EdgeInsets.all(4),
   child: Container(
     height: MediaQuery.of(context).size.height * 0.05,
     decoration: BoxDecoration(
       color: Colors.greenAccent,
       border: Border.all(),
       borderRadius: BorderRadius.circular(99999),
     ),
     constraints: BoxConstraints(
       minWidth: 10,
       maxWidth:200,
     ),
     child: Padding(
       padding: const EdgeInsets.all(2),
       child: Column(   // column instead of align/container/center since these exapnd the widgets to there fullest
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text(

             '123'.toUpperCase(),
             style: TextStyle(
               fontWeight: FontWeight.bold,
             ),
             maxLines: 1,
             textAlign: TextAlign.center,
             overflow: TextOverflow.ellipsis,
           ),
         ],
       ),
     ),
   ),
 ),

下一种方法显着改变了代码，但可能效果最好，而不是父容器有高度，我们可以在它周围填充：

 class MyCard extends StatelessWidget {  //completely replaces old card class
   @override
   Widget build(BuildContext context) {
     return Card(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(MediaQuery.of(context).size.height * 0.03),
       ),
       elevation: 3,
       child: Column(
         children: [
           Row(
             children: [
               Container(
                 margin: EdgeInsets.all(4), //replaces previous padding widget
                 padding: EdgeInsets.all((MediaQuery.of(context).size.height * 0.05 - 16)/2),  // this is used instead of defining a height and automatically centers, replace 16 with font size
                 decoration: BoxDecoration(
                   color: Colors.greenAccent,
                   border: Border.all(),
                   borderRadius: BorderRadius.circular(99999),
                 ),
                 constraints: BoxConstraints(
                   minWidth: 10,
                   maxWidth:200,
                 ),
                 child: Text(

                   '1234'.toUpperCase(),
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
                   ),
                   maxLines: 1,
                   textAlign: TextAlign.center,
                   overflow: TextOverflow.ellipsis,
                 ),    
               ),
             ],
           )
         ],
       ),
     );
   }
 }

flutter - 颤振：使用中心小部件覆盖最小宽度

问题描述

解决方案

推荐阅读