Flutter Mainaxisalignment 格式不正确

Posted 2023-02-23

【中文标题】Flutter Mainaxisalignment 格式不正确

【英文标题】：Flutter Mainaxisalignment not formatting correctly

【发布时间】：2021-12-31 12:34:27

【问题描述】：

我对今天开始的 Flutter/android 工作室有疑问。 Mainaxisalignment 未显示正确的格式 “标题距离”而不是“标题距离”

我认为我没有更改任何代码，但可能是 pub get/upgrade，...我的提供程序也有问题（我说的是 Firebase 身份验证的提供程序）。

这是一个全新的项目，只有这个 Dart 文件，同样的问题。 VS-Code 中同样的问题

import 'package:flutter/material.dart';

void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);

  final String title;


  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;

  void _incrementCounter() 
    setState(() 
      _counter++;
    );
  

  @override
  Widget build(BuildContext context) 
    String title = "title";
    String value1 = "distance";
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: FittedBox(
          fit: BoxFit.fitWidth,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              Text(value1),
            ],
          ),
        ),
        actions: <Widget>[
          if (title != 'Settings' ) //|| title != 'Laatste Minuut Risico Analyse'
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Settings',
              onPressed: () 
                Navigator.pushNamed(context, '/settings');
              ,
            ),
            IconButton(
            icon: const Icon(Icons.logout),
            tooltip: 'Logout',
            onPressed: () => showDialog<String>(
              context: context,
              builder: (BuildContext context) => AlertDialog(
                title: const Center(child: Text('Logout')),
                content: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Text('Are you sure you want to logout?'),
                  ],
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () => Navigator.pop(context, 'Cancel'),
                    child: const Text('Cancel'),
                  ),
                  TextButton(
                    onPressed: () 
                      //context.read<AuthenticationProvider>().signOut(context);
                      Navigator.pop(context, 'SignOut');
                    ,
                    child: const Text('Yes'),
                  ),
                ],
              ),
            ),
          ),
        ],)
      ,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  

【参考方案1】：

无需为此添加额外的代码，只需一行代码，我们就可以做到这一点。

 title: FittedBox(
          fit: BoxFit.fitWidth,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              Text(value1),
            ],
          ),
        ),

替换为

   title: Text("$title $value1"),

或者你可以使用 SizedBox()

          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title),
              SizedBox(width:5),
              Text(value1),
            ],
          ),
        ),

【讨论】：

这是我的另一个（更大的代码）的摘录。它是：'child：Row（mainAxisAlignment：MainAxisAlignment.spaceEvenly，children：[Text（title！），if（value1！= null）Text（value1！），if（value2！= null）Text（value2！）， if (value3 != null) Text(value3!), ],' 它之前工作过

【参考方案2】：

1- 问题在于 FittedBox 类会根据适合程度在其内部缩放和定位其子级。

要理解问题，首先将BoxDecoration 添加到您的代码中以查看：

显示BoxDecoration的代码：

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(
            title,
            style: const TextStyle(fontSize: 40),
          ),
        ),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.white)),
            child: Text(value1)),
      ],
    ),
  ),
),

使用FittedBox(fit: BoxFit.fitWidth,，您将强制框适应孩子的宽度 - 上图中的黑色边框框。

2- 然后使用mainAxisAlignment: MainAxisAlignment.spaceBetween, 是没有意义的，因为项目之间根本没有空间可以放置。除非您删除 FittedBox 例如： 代码：

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.white)),
        child: Text(
          title,
          style: const TextStyle(fontSize: 40),
        ),
      ),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(value1)),
    ],
  ),
),

现在您将看到： 之间的空格 代码：

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.white)),
        child: Text(
          title,
          style: const TextStyle(fontSize: 40),
        ),
      ),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text('spaceBetween')),
      Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(value1)),
    ],
  ),
),

或者只使用一个空格Text(' '):

现在添加FittedBox:

centerTitle: true,
title: Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: FittedBox(
    fit: BoxFit.fitWidth,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.white)),
          child: Text(
            title,
            style: const TextStyle(fontSize: 40),
          ),
        ),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.black)),
            child: Text(' ')),
        Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.white)),
            child: Text(
              value1,
              style: const TextStyle(fontSize: 40),
            )),
      ],
    ),
  ),
),

所以你有一些选择：

1- 将Padding 用于一项或两项：

children: [
  Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(title),
  ),
  Text(value1),
],

2- 您可以使用虚拟Container、SizedBox 或Text(' '),：

children: [
  Text(title),
  SizedBox(width: 8), // Container(width: 8), // Text(' '),
  Text(value1),
],

或简单地添加一个空格，例如：

 Text(title + ' '),

或

 Text(' ' + value1),

并查看（注意：行而不是列）：Space between Column's children in Flutter

Set the space between Elements in Row Flutter

【讨论】：

感谢您的解释。我将它用作小部件应用栏，昨天它像那样工作，而今天却不行。有什么想法吗？

所以你需要将升级版本与之前的版本进行比较才能发现差异。使用差异工具找出。如果您还有以前的版本，请尝试在不升级的情况下运行它，它可以工作吗？

我想我找到了这个问题的根源。有时我的标题太长，以至于溢出。这就是我添加fitbox的原因