DevQtPH's questions

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

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')],
            ),
          ],
        ),
      ),
    );
  }
}

我正在使用 API，它将作为我的项目架构中的数据访问层。

这是我的 API 查询设置的原始形式：

const pool = await poolPromise;
const request = pool.request();
const result = await request.input('user_id', sql.NVarChar(50), user_id || null)
    .input('img_data', sql.VarBinary(sql.MAX), Buffer.from(img_data))
    .input('img_size', sql.Decimal(10, 3), img_size)
    .input('birthday', sql.Date, birthday)
    .input('country', sql.VarChar(200), country)
    .input('email_add', sql.NVarChar(150), email_add)
    .input('mobile_no', sql.VarChar(50), mobile_no)
    .input('key', sql.VarChar(100), key)
    .query('EXEC testStoredProcedure @user_id, @img_data, @img_size, @birthday, @country, @email_add, @mobile_no, @key');

它与该设置配合良好。

但是，如果参数比预期的多，我想在保持相同结果的情况下提高 API 查询的可读性。

因此我使用变量和反引号来使用这些方法：

使用 req.body.[param]

const query = `
    'EXEC testStoredProcedure
    @user_id = ${req.body.user_id},
    @img_data = ${req.body.img_data},
    @img_size = ${req.body.img_size},
    @birthday = ${req.body.birthday},
    @country = ${req.body.country},
    @email_add = ${req.body.email_add},
    @mobile_no = ${req.body.mobile_no},
    @key = ${req.body.key}'
`;

const pool = await poolPromise;
const request = pool.request();
const result = await request.input('user_id', sql.NVarChar(50), user_id || null)
    .input('img_data', sql.VarBinary(sql.MAX), Buffer.from(img_data))
    .input('img_size', sql.Decimal(10, 3), img_size)
    .input('birthday', sql.Date, birthday)
    .input('country', sql.VarChar(200), country)
    .input('email_add', sql.NVarChar(150), email_add)
    .input('mobile_no', sql.VarChar(50), mobile_no)
    .input('key', sql.VarChar(100), key)
    .query(query);

不带 req.body

const query = `
    'EXEC testStoredProcedure
    @user_id = ${user_id},
    @img_data = ${img_data},
    @img_size = ${img_size},
    @birthday = ${birthday},
    @country = ${country},
    @email_add = ${email_add},
    @mobile_no = ${mobile_no},
    @key = ${key}'
`;

const pool = await poolPromise;
const request = pool.request();
const result = await request.input('user_id', sql.NVarChar(50), user_id || null)
    .input('img_data', sql.VarBinary(sql.MAX), Buffer.from(img_data))
    .input('img_size', sql.Decimal(10, 3), img_size)
    .input('birthday', sql.Date, birthday)
    .input('country', sql.VarChar(200), country)
    .input('email_add', sql.NVarChar(150), email_add)
    .input('mobile_no', sql.VarChar(50), mobile_no)
    .input('key', sql.VarChar(100), key)
    .query(query);

两者都无法通过我的 Flutter 项目中的此 API 调用来处理请求：

await _api.testMethod(
    '/api/request', // route
    null, // user_id
    '', // img_data
    0.00, // img_size
    DateTime.now().toIso8601String(), // birthday
    'Philippines', // country
    null, // email_add
    _mobileNo, // mobile_no
    'SIGN_IN'); // key

这就是有req.body.[param]和没有的req.body.[param]日志内容：

未捕获的异常：异常：无法发出 POST 请求：异常：API 错误：500 {消息：'EXEC testStoredProcedure @user_id = null, @img_data = '', '.} 附近的语法不正确

根据日志，指定参数附近的语法EXEC testStoredProcedure不正确。因此，我在这里遗漏了什么？

我正在使用一段代码片段来生成一个随机的 4 位代码。但不幸的是，我无法获得我想要的准确输出。

我正在使用这段代码片段：

import 'dart:math';

void _generateCode() {
  Set<int> setOfInts = {};
  setOfInts.add(Random().nextInt(9999));
  for (var num in setOfInts) {
    if (num.toString().length == 4) {
      developer.log('Code: $num');
    } else {
      developer.log('Code: not a 4 digit code');
    }
  }
}

@override
void initState() {
  super.initState();
  _generateCode(); // for testing purposes only
}

该代码主要是生成一个 4 位随机代码，我认为我可以通过添加这个条件语句来实现它，

if (num.toString().length == 4) {
  //fortunately, I could get what I want here
}

但问题是，根据日志上打印的内容（每次我执行热重载时）：

218 毫秒内重新启动应用程序 。 [
日志] 代码：8308 221 毫秒 内重新启动应用程序。 [ 日志] 代码：6342 209 毫秒内重新启动应用程序。[日志] 代码：3404 208 毫秒内重新启动应用程序。 [日志] 代码：9468 246 毫秒内重新启动应用程序。 [ 日志] 代码：1101 127 毫秒内重新启动应用程序。 [日志] 代码：8230 133 毫秒内重新启动应用程序。 [日志] 代码：4104 220 毫秒 内重新启动应用程序。 [日志] 代码：6558 213 毫秒内重新启动应用程序。 [日志] 代码：不是 4 位代码 👈 这是它产生的问题的一部分 223 毫秒内重新启动应用程序。 [日志] 代码：6234

如果我删除了 else 语句：

if (num.toString().length == 4) {
  developer.log('Code: $num');
} else {
  developer.log('Code: not a 4 digit code');
}

我无法获得 4 位数的代码，我只是认为通过使用此语句if (num.toString().length == 4)，可以确保生成 4 位数的代码，但事实并非如此。

我该如何解决它，以便不生成 3 位代码值？