我正在尝试为登录页面做这个特殊的设计。

但我得到的结果如下：

我尝试的代码是：

               Stack(
                      fit: StackFit.passthrough,
                      children: [
                        Container(height: 2, color: Colors.grey),
                        Positioned(
                          child: Center(
                            child: Transform.rotate(
                              alignment: Alignment.center,
                              angle: 45,
                              child: Container(
                                height: 18,
                                width: 18,
                                color: colorController.primaryColor.value,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),

将我的 Flutter 版本升级到 3.29.3 后：

Flutter 3.29.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ea121f8859 (2 weeks ago) • 2025-04-11 19:10:07 +0000
Engine • revision cf56914b32
Tools • Dart 3.7.2 • DevTools 2.42.3

我无法连接我的 SpringBoot 应用。我使用 openssl 生成的证书：

openssl.exe req -newkey rsa:2048 -keyout PRIVATEKEY.key -out MYCSR.csr

openssl.exe req -new -x509 -nodes -sha256 -days 365 -key PRIVATEKEY.key -out host.cert

openssl.exe pkcs12 -export -in host.cert -inkey PRIVATEKEY.key -out keystore.p12 -name myApp

使用 Postman，我的请求：https://localhost/auth/authenticate根据POST请求运行良好并提供我的 access_token。

现在，当我在实体手机上启动 Flutter 应用程序时，出现以下错误：

I/flutter ( 3796): ClientException with SocketException: Connection timed out (OS Error: Connection timed out, errno = 110), address = 192.168.1.40, port = 37950, uri=https://192.168.1.40/auth/authenticate
I/.example.xplore( 3796): Thread[2,tid=3802,WaitingInMainSignalCatcherLoop,Thread*=0xb40000732bd83c00,peer=0x15440320,"Signal Catcher"]: reacting to signal 3
I/.example.xplore( 3796): 
I/.example.xplore( 3796): Wrote stack traces to tombstoned
D/Looper  ( 3796): dumpMergedQueue
D/OplusLooperMsgDispatcher( 3796): dumpMsgWhenAnr

我的计算机上的本地 IP 地址（ipconfig）是192.168.1.40。

在我的 main.dart 中，我覆盖了createHttpClient（我认为这仅适用于 DEV，不适用于 PROD）：

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

我POST在 Flutter 应用程序中的请求如下所示：

var response = await http.post(Uri.parse(login),
          headers: {"Content-Type": "application/json"},
          body: jsonEncode(reqBody))

如果您需要更多信息，请问我:)

感谢您的帮助！

有趣的是，如果我必须使用这些小部件列出详细信息：

Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),
Row(
  mainAxisAlignment:
      MainAxisAlignment.spaceBetween,
  children: [
    Text('some label'),
    Text('some value'),
  ],
),

每次我都用一种更简单的方式将它们包裹Wrap起来Column。

如果我使用，我永远无法达到我预期的效果Wrap，就像这样：

Wrap(
  direction: Axis.vertical,
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

意外的输出：

问题是内容放在了左侧。即使我Wrap用SizedBox(width: double.infinity, child: ...)

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [...],)我仅通过这种方法实现了我想要的（即，因为我在这里使用）：

使用Column()widget而不是Wrap()widget

Column(
  spacing: 8.0,
  children: [
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
    Row(
      mainAxisAlignment:
          MainAxisAlignment
              .spaceBetween,
      children: [
        Text('some label'),
        Text('some value'),
      ],
    ),
  ],
),

预期输出：

请注意，SizedBox(width: double.infinity, child: Column(...))对于这种情况而言是多余的，除非有用例建议这样做。

有人能更详细地解释一下为什么会发生这种情况吗？如果我们倾向于使用这种布局结果，更好地理解这一点可以避免实施错误的设置。

PS 如果在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(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          spacing: 8.0,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [Text('some label'), Text('some value')],
            ),
          ],
        ),
      ),
    );
  }
}

我创建了一个小部件。这是一个卡片。整个卡片按列排列。在这个卡片中，两个图标（删除和勾选）需要并排放置。接下来，应该使用一个 SizedBox 作为分隔线（我也尝试过 Divider，但结果相同）。在这条分隔线之后，应该出现另一个大小合适的盒子，用于容纳后续内容。现在出现了一个问题，分隔线或大小合适的盒子没有显示，我不清楚错误出在哪里。小部件如下：

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

class TischCredentials extends ConsumerStatefulWidget {
  const TischCredentials({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _TischCredentialsState();
  }
}

class _TischCredentialsState extends ConsumerState<TischCredentials> {
  @override
  Widget build(BuildContext context) {
    //final tischIndex = ref.watch(tischProvider.notifier).state;
    //tischIndexErhoehen(tischIndex);
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              //Text("Tisch " + tischIndex.toString()),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.check)),
            ],
          ),
          SizedBox(
            height: 10,
            child: Center(
              child: Container(
                margin: EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
                height: 5.0,
                color: Colors.red,
              ),
            ),
          ),
          SizedBox(
            height: 100,
            width: 200,
          ),
        ],
      ),
    );
  }
}

谢谢你的帮助。

如何DataCell在 Flutter DataTable中右对齐每个数据？

例如，在这种情况下，我怎样才能让所有数字都右对齐？

Widget build(BuildContext context) {
  return DataTable(
    columns: const <DataColumn>[
      DataColumn(
        label: Expanded(child: Text('Name', style: TextStyle(fontStyle: FontStyle.italic))),
      ),
      DataColumn(
        label: Expanded(child: Text('Number', style: TextStyle(fontStyle: FontStyle.italic))),
      ),
    ],
    rows: const <DataRow>[
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Sarah')),
          DataCell(Text('1')),
        ],
      ),
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Janine')),
          DataCell(Text('100')),
        ],
      ),
      DataRow(
        cells: <DataCell>[
          DataCell(Text('William')),
          DataCell(Text('1000')),
        ],
      ),
    ],
  );
}

提前致谢！

我正在尝试使用 基于现有亮色主题创建暗色主题lightTheme.copyWith(brightness: Brightness.dark)。但是，该应用似乎忽略了暗色主题的亮度。

我的 main.dart 使用以下代码：

@override
Widget build(BuildContext context) {
  return MaterialApp(
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      themeMode: ThemeMode.dark,
      ...
  );
}

其中Themes.lightTheme和Themes.darkTheme定义如下：

class Themes {
  static ThemeData get lightTheme => ThemeData(
        colorSchemeSeed: Colors.green,
      );

  static ThemeData get darkTheme => lightTheme.copyWith(
        brightness: Brightness.dark,
      );
}

调试器显示深色主题包含brightness: Brightness.dark。

但是，当我按如下方式定义黑暗主题时，一切正常copyWith：

class Themes {
  static ThemeData get lightTheme => ThemeData(
        colorSchemeSeed: Colors.green,
      );

  static ThemeData get darkTheme => ThemeData(
        colorSchemeSeed: Colors.green,
        brightness: Brightness.dark,
      );
}

有人能指出我对 Dart/Flutter 知识的盲点并解释一下发生了什么吗？

环境：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.3, on Microsoft Windows [Version 10.0.22631.5262], locale xx-XX)
[✓] Windows Version (11 Home 64-bit, 23H2, 2009)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.13.6)
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.99.3)
[✓] Connected device (3 available)
[✓] Network resources

我正在使用StatefulShellRoute带有StatefulShellBranches 的 a，如下面的代码所示。

我想要实现以下目标：当我在 的某个路由中时，StatefulShellBranch我想导航到该 的第一个/默认路由StatefulShellBranch。例如，当我导航到 时path5，我想从 内部Widget5导航到path4。

我的用例是，里面有一个后退按钮Widget5，当我直接导航到（即通过深层链接）时，我想在按下后退按钮时path5“弹出”到其中的第一个/默认路线。StatefulShellBranch

路由器

router = GoRouter(
    routes: StatefulShellRoute.indexedStack(
      parentNavigatorKey: parentNavigatorKey,
      branches: [
        StatefulShellBranch(
          navigatorKey: key1,
          routes: [
            GoRoute(
              path: path1,
              pageBuilder: (context, state) {
                return Widget1();
              },
              routes: <RouteBase>[
                GoRoute(
                  path: path2,
                  pageBuilder: (context, state) {
                    return Widget2();
                  },
                ),
                GoRoute(
                  path: path3,
                  pageBuilder: (context, state) {
                    return Widget3();
                  },
                ),
              ],
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: key2,
          routes: [
            GoRoute(
              path: path4,
              pageBuilder: (context, state) {
                return Widget4();
              },
            ),
            GoRoute(
              path: path5,
              pageBuilder: (context, state) {
                return Widget5();
              },
            ),
          ],
        ),
      ],
    ),
    GoRoute(
      parentNavigatorKey: parentNavigatorKey,
      path: path6,
      pageBuilder: (context, state) {
        return Widget6();
      },
    ));

小部件

// Inside Widget5
class BackButton extends StatelessWidget {
  ...
  onPressed() {
    if (router.canPop()) {
      router.pop();
    } else {
      // TODO: Navigate to default route of StatefulShellBranch
      final defaultRoute = router
          .routerDelegate
          .currentConfiguration.???();
    }
  }
  ...
}

我目前遇到一个问题，不知道该如何解决。我的屏幕上有几张卡片，每张卡片代表一张“表格”。我想给每张卡片都加上索引。换句话说，每张表格都应该以“表格”作为标题，并附加索引。例如“表格 1、表格 2”等等。我为卡片小部件的基本外观创建了一个单独的文件：

tisch_credentials.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class TischCredentials extends ConsumerStatefulWidget {
  const TischCredentials({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _TischCredentialsState();
  }
}

class _TischCredentialsState extends ConsumerState<TischCredentials> {
  @override
  Widget build(BuildContext context) {
    //final tischIndex = ref.watch(tischProvider.notifier).state;
    //tischIndexErhoehen(tischIndex);
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              //Text("Tisch " + tischIndex.toString()),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.check))
            ],
          ),
          SizedBox(
            height: 8,
          ),
          Container(
            height: 50,
            width: 50,
          ),
        ],
      ),
    );
  }
}

我想在这个文件中实现这个功能，但效果不如预期。所以我把它移到了主屏幕，结果还是一样。我最后一次尝试是这样的：

订单_主_屏幕.dart

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class BestellungenMainSreen extends ConsumerWidget {
  BestellungenMainSreen({super.key, required this.tischIndex});

  int tischIndex = 0;
  String tischIndexErhoehen(int i) {
    i = ++i;
    return i.toString();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    String aktuellerIndex = tischIndexErhoehen(tischIndex);
    return Scaffold(
      appBar: AppBar(
        title: Text('Bestellungen'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text('Tisch ' + aktuellerIndex),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),*/
              Text('Tisch ' + tischIndexErhoehen(tischIndex)),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),*/
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                //color: Colors.red,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

很遗憾，我不知道该如何解决这个问题。Riverpod 可以考虑吗？比如，把索引保存在提供程序中，然后增加索引值并分配给各个小部件？或者用 Future 来解决整个问题？或者创建一个列表，然后将其显示在卡片中？

我很感激您能帮我找到实现此 UI 功能的惯用方法。假设我想要一个由“IconButton和”组成的组合Text（例如，一个名称前面有一个星号）。我想将它放置在“和”中Row（它本身位于一个容器中，例如Column“”。但是，我需要确保满足以下要求（参见附图）：

• 图标位于文本正前方（即中间没有多余的空格）
• 当文本足够短时，这对小部件位于行内的中心。
• 如果文本太长，则会被适当剪辑（例如使用省略号）而不会溢出。

到目前为止，我还没有成功实现这一点。如果我Spacer在两侧放置两个 Widget，生成的文本会被严重截断。如果我用 包裹它Expanded，就会引发 flex 异常。鉴于这表面上是一种相当流行的文本呈现方式，那么 Flutter 的布局方式是什么呢？

我正在开发一个 Flutter 布局，其中有一个交通方式列表（例如步行、汽车、公共汽车、火车），并且我使用一个小部件Stack将个人资料头像放在顶部。 这里的个人资料头像不在第 1 行内。 这是示例 UIPositioned

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text("Walk"),
          Text("Car"),
          Text("Bus"),
          Text("Train"),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

一切工作正常，直到文本变得太长，就像在这种情况下
，如果文本太长，这就是它绘制有问题的用户界面的方式

我尝试手动将文本包裹在固定宽度的 sizedbox 中，这样就不会重叠了。
但这并非在所有情况下都有效。

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Row(
            children: [
              Icon(Icons.directions_walk),
              SizedBox(width: 8),
              // Manually restrict text width to avoid overlap
              SizedBox(
                width: 80, // <-- hardcoded width
                child: Text("Walk Walk Walk"),
              ),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_car),
              SizedBox(width: 8),
              Text("Car"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_bus),
              SizedBox(width: 8),
              Text("Bus"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.train),
              SizedBox(width: 8),
              Text("Train"),
            ],
          ),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

有没有更好的方法来布局，这样Positioned小部件就不会干扰下面的文本布局——不需要硬编码宽度