【问题标题】:Flutter Mainaxisalignment not formatting correctlyFlutter Mainaxisalignment 格式不正确
【发布时间】: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.
    );
  }
}

【问题讨论】:

    标签: flutter android-studio visual-studio-code


    【解决方案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- 您可以使用虚拟ContainerSizedBoxText(' '),

    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的原因
    猜你喜欢
    • 2021-05-17
    • 2022-01-16
    • 2023-02-01
    • 2015-08-29
    • 2012-02-15
    • 2019-04-29
    • 2011-08-26
    • 1970-01-01
    • 2013-03-20
    相关资源
    最近更新 更多