时间戳

首页 > 解决方案 > 展开真的很糟糕

flutter - 展开真的很糟糕

问题描述

我想TextField以前面的孩子为中心

在此处输入图像描述

但是当它被包裹起来时Expanded，它真的很糟糕

在此处输入图像描述

这是行的一部分

    Container(
            child: Expanded(
              child: TextField(
                style: TextStyle(
                  color: Color(0xff666666),
                  fontSize: 15.sp,
                ),
                decoration: InputDecoration(
                    hintText: S
                        .of(context)
                        .phoneNumber,
                    hintStyle: TextStyle(
                      color: Color(0xFFCCCCCC),
                    ),
                    border: InputBorder.none),
                inputFormatters: [
                  WhitelistingTextInputFormatter.digitsOnly,
                  LengthLimitingTextInputFormatter(10)
                ],
                keyboardType: TextInputType.number,
                textInputAction: TextInputAction.next,
                cursorColor: Color(0xFF1FA2FF),
              ),
            ))

更新：完整的行代码

             Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Image(
                      image: AssetImage("img/phone_icon.png"),
                      width: 36.w,
                      height: 19.h,
                      fit: BoxFit.fill,
                    ),
                    Text(
                      "+60",
                      style:
                          TextStyle(color: Color(0xff666666), fontSize: 15.sp),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(15.w, 0, 14.w, 0),
                      alignment: Alignment.center,
                      width: 1.w,
                      height: 12.h,
                      decoration: BoxDecoration(color: Color(0xffCCCCCC)),
                    ),
                    Expanded(
                      child: TextField(
                        style: TextStyle(
                          color: Color(0xff666666),
                          fontSize: 15.sp,
                        ),
                        decoration: InputDecoration(
                            hintText: S.of(context).phoneNumber,
                            hintStyle: TextStyle(
                              color: Color(0xFFCCCCCC),
                            ),
                            border: InputBorder.none),
                        inputFormatters: [
                          WhitelistingTextInputFormatter.digitsOnly,
                          LengthLimitingTextInputFormatter(10)
                        ],
                        keyboardType: TextInputType.number,
                        textInputAction: TextInputAction.next,
                        cursorColor: Color(0xFF1FA2FF),
                      ),
                    )
                  ],
                )

标签： flutter

解决方案

在此处输入图像描述

我想向您展示一个我刚刚创建的快速示例，其中显示了完全对齐的不同小部件：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(height: 300, width: MediaQuery.of(context).size.width * 1, color: Colors.yellow, child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(width: 10),
      Text('First Element'),
        SizedBox(width: 10),
Text('Second Element'),
        SizedBox(width: 10),
        IconButton(
          icon: Icon(Icons.volume_up),
          tooltip: 'Increase volume by 10',
          onPressed: () {},
        ),
    ]));
  }
}

您所描述的错误是由于Row()是一个灵活的小部件，它需要适当地定义一些父母的高度和宽度。您的行在该结构中没有任何父级，可用作该行的有关如何使其可对齐的信息Expandable()不计在内，因为它也是一个灵活的小部件。

详细地说，您正在嵌套元素。 https://flutter.dev/docs/development/ui/layout

这是一篇很好的文章，可以更好地理解 ui 元素： https ://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

也很高兴知道： 行和列 需要掌握的两个最重要的 Widget 以及每个 Flutter 开发人员存在的祸根是行和列。无论你是想创建一个复杂的新闻应用程序，还是一些简单的图标和文本对齐的按钮，你都必须嵌套行和列……而当你嵌套它们时，各种事情都会开始变得非常奇怪，非常快. 行和列都扩展了 Flex 类，这意味着它们是子类，而 Flex 是它们的超类。Row 和 Column 之间唯一真正的区别是 Row 是一个 Flex，它的方向属性硬编码为水平，而 Column 的硬编码为垂直。让很多 Flutter 新手感到困惑的一件事是，当你的 Row 或 Column 在你的脸上爆炸时，错误永远不会说 Row 或 Column。新人被卡住盯着错误信息，

https://blog.codemagic.io/flutter-tutorial-part-2/

推荐阅读