vacosti's questions

如何将 定位到icon的右下方Container以包裹button，而无需将设置height为Container？

我尝试使用Stack，但没有成功。正如许多答案所建议的那样，我无法将 a 设置height为 the Container，因为根据我的文本的大小，它会被截断（我需要显示整个文本（这是琐事应用程序中的选择））。请参阅下面的代码片段并打印以查看在这种情况下会发生什么：

1）设置容器高度（不起作用）：

转到Icon右下角，但文本被截断：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget choiceSelectedButton = Container(
    height: 50,
    width: 100,
    child: Stack(
      children: [
        Align(
          child: OutlinedButton(
              onPressed: () {},
              child: Text('test test test test test test test test')),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(
            Icons.check_circle,
            color: Colors.green,
            size: 30,
          ),
        ),
      ],
    ),
  );

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: choiceSelectedButton),
    );
  }
}

然后，我尝试删除高度，并尝试将Container和包装Icon在 Expanded、Flexible、FittedBox 中（即使这没有意义）：

2）从容器中删除高度属性（不起作用）：

现在，文本不会被截断，但图标会移位：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget choiceSelectedButton = Container(
    width: 100,
    child: Stack(
      children: [
        Align(
          child: OutlinedButton(
              onPressed: () {},
              child: Text('test test test test test test test test')),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Icon(
            Icons.check_circle,
            color: Colors.green,
            size: 30,
          ),
        ),
      ],
    ),
  );

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: choiceSelectedButton),
    );
  }
}

我怎样才能做到这一点？

搜索的问题：

如何在 Flutter 中将图标放在容器的右下角

右下角图标颤动

在容器右下角放置一个图标

（但解决方案是设置高度）

Flutter 位置按钮底部非常右？ （spacer（）不起作用）

Flutter 容器定位右下角 alignment属性不起作用

如何将图标/按钮放置在 FLUTTER 中容器的右上角？

根本不起作用

右下角的图标颤动 （但解决方案是不设置高度，因此出现问题 2）

我有一个场景，我需要Form仅在某个Future完成后才显示（实际上，是在动画完成后，但我在下面的代码片段中简化了内容以便于重现）。

然后，当表格填写并提交，并且表格中提供的答案正确时，我需要更改表格字体的颜色（除其他事项外，但我正在简化）。

我曾尝试通过更改 setState 中变量的值来执行此操作（更改表单字体颜色）_isAnswerCorrect，该值会传递给无状态小部件NumberInputField，该小部件是 的包装器TextFormField。但是，NumberInputField不会重建。

我也尝试过将key（UniqueKey()和ValueKey(_isAnswerCorrect.toString())）设置为NumberInputField，因为这个解决方案在另一个类似的场景中对我有用，但都没有起作用。

只需复制并粘贴下面的代码到 dartpad 中即可查看实际行为（这里不起作用）：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isAnswerCorrect = false;

  Widget _questionForm = Container();

  final _formKey = GlobalKey<FormState>();

  void _answerIsCorrect() {
    setState(() {
      _isAnswerCorrect = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Show form'),
              onPressed: () {
                Future.delayed(
                  const Duration(milliseconds: 100),
                  () => setState(
                    () {
                      _questionForm = SizedBox(
                        width: 100,
                        child: Column(
                          children: [
                            Form(
                              key: _formKey,
                              child: NumberInputField(
                                isAnswerCorrect: _isAnswerCorrect,
                              ),
                            ),
                            SizedBox(height: 20),
                            ElevatedButton(
                              child: Text('Change Color?'),
                              onPressed: _answerIsCorrect,
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                );
              },
            ),
            SizedBox(height: 20),
            _questionForm,
          ],
        ),
      ),
    );
  }
}

class NumberInputField extends StatelessWidget {
  final bool isAnswerCorrect;

  const NumberInputField({
    super.key,
    required this.isAnswerCorrect,
  });

  @override
  Widget build(BuildContext context) {
    Color fontColor = Colors.blue;

    if (isAnswerCorrect) {
      fontColor = Colors.black;
    }

    return TextFormField(
      style: TextStyle(color: fontColor),
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: '?',
      ),
    );
  }
}

但是，我已经成功地以另一种形式做到了这一点，这种形式并不是仅在 Future 之后设置的（这里有效）（只需在 dartpad 中复制并粘贴下面的代码即可查看行为）：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isAnswerCorrect = false;

  final _formKey = GlobalKey<FormState>();

  void _answerIsCorrect() {
    setState(() {
      print('setting state');
      _isAnswerCorrect = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 100,
              child: Column(
                children: [
                  Form(
                    key: _formKey,
                    child: NumberInputField(
                      isAnswerCorrect: _isAnswerCorrect,
                    ),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    child: Text('Change Color?'),
                    onPressed: _answerIsCorrect,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class NumberInputField extends StatelessWidget {
  final bool isAnswerCorrect;

  const NumberInputField({
    super.key,
    required this.isAnswerCorrect,
  });

  @override
  Widget build(BuildContext context) {
    Color fontColor = Colors.blue;

    if (isAnswerCorrect) {
      fontColor = Colors.black;
    }

    return TextFormField(
      style: TextStyle(color: fontColor),
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: '?',
      ),
    );
  }
}

我肯定忽略了一些非常琐碎的事情。有人知道为什么会这样吗？

我想要的是：

我想在 Flutter 中将一些文本环绕在图像周围。由于已经有很多关于此的问题，我所说的“将一些文本环绕在图像周围”的意思是：

为了实现这一点，我尝试使用RichText和Wrap类，但没有成功。我得到的结果是：

RichText（Text.rich）[不是我想要的]：

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Rich Text (Text.rich) test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  WidgetSpan(
                    child: Image.network(
                      'https://picsum.photos/250?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                  TextSpan(
                    text:
                        "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );

我也尝试在上面的代码中添加，得到以下结果（也不是我想要的）alignment: PlaceholderAlignment.middle：WidgetSpan

包装[不是我想要的]：

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Wrap test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Wrap(
              children: [
                Image.network(
                  'https://picsum.photos/250?image=9',
                  width: 200,
                  height: 200,
                ),
                Text(
                  "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                )
              ],
            ),
          ),
        ),
      ),
    );

我怎样才能在 Flutter 中实现我想要的？

这是我第一次尝试使用 flutter_math_fork 0.7.2 包来显示 Tex 方程式，但由于以下错误（"hashValues" is not found or defined），它甚至无法编译：

flutter run
Launching lib/main.dart on sdk gphone x86 in debug mode...
../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/widgets/selectable.dart:603:23: Error: The method 'hashValues' isn't defined for the class 'SelectionStyle'.
 - 'SelectionStyle' is from 'package:flutter_math_fork/src/widgets/selectable.dart' ('../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/widgets/selectable.dart').
Try correcting the name to the name of an existing method, or defining a method named 'hashValues'.
  int get hashCode => hashValues(
                      ^^^^^^^^^^
../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/ast/options.dart:400:7: Error: The method 'hashValues' isn't defined for the class 'FontOptions'.
 - 'FontOptions' is from 'package:flutter_math_fork/src/ast/options.dart' ('../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/ast/options.dart').
Try correcting the name to the name of an existing method, or defining a method named 'hashValues'.
      hashValues(fontFamily.hashCode, fontWeight.hashCode, fontShape.hashCode);
      ^^^^^^^^^^
../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/ast/options.dart:434:7: Error: The method 'hashValues' isn't defined for the class 'PartialFontOptions'.
 - 'PartialFontOptions' is from 'package:flutter_math_fork/src/ast/options.dart' ('../../.pub-cache/hosted/pub.dev/flutter_math_fork-0.7.2/lib/src/ast/options.dart').
Try correcting the name to the name of an existing method, or defining a method named 'hashValues'.
      hashValues(fontFamily.hashCode, fontWeight.hashCode, fontShape.hashCode);
      ^^^^^^^^^^
Target kernel_snapshot_program failed: Exception


FAILURE: Build failed with an exception.

我的代码：

import 'package:flutter_math_fork/flutter_math.dart';
...
child: choicesContainsTexEquation ? Text(text) : Math.tex(text),

上面的变量text是从 JSON 文件中读取的。使用下面的两个文本（解码为字符串）时，会出现相同的错误（无论是尝试在 Android 模拟器还是 Chrome 上运行）：

"text":"test"和"text": "e^{i\\pi}+1=0"

在pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter

  flutter_math_fork: ^0.7.2

可能存在什么问题？

我尝试更改文本（使用 Tex 方程式或“纯”文本）和平台（Android 模拟器和 Chrome），但出现了相同的错误。