使用下面的图片来格式化文本,带有抖动

问题描述 投票:0回答:1

enter image description here

我需要像这样格式化文本,我尝试过这样的事情,但是问题是,如果没有数据,整个对齐方式就会崩溃。我尝试过spaceBetween和spaceEvenly,但是没有任何变化。我在整个对齐方式中做了什么容器向左移,我在将spacemEvenly对齐到行中并对齐居中]

 Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    color: Colors.orangeAccent[100],
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                          flex: 0,
                          child:Padding(
                            padding: EdgeInsets.only(top:10),
                            child: Text(
                              "Name :",
                              softWrap: true,
                              style: TextStyle(
                                fontSize: 15,
                                color: Colors.black87,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),

                        ),
                        Expanded(
                          flex: 0,
                          child:Padding(
                            padding: EdgeInsets.only(top:10),
                            child: Text(
                              name_rec != null ? name_rec : '',
                              softWrap: true,
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.black87,
                              ),
                            ),
                          ),

                        ),
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                          flex: 0,
                          child:Padding(
                            padding: EdgeInsets.only(top:10),
                            child: Text(
                              "Address:",
                              softWrap: true,
                              style: TextStyle(
                                fontSize: 15,
                                color: Colors.black87,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),

                        ),
                        Expanded(
                          flex: 0,
                          child:Padding(
                            padding: EdgeInsets.only(top:10),
                            child: Text(
                              address_rec != null ? address_rec : '',
                              softWrap: true,
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.black87,
                              ),
                            ),
                          ),

                        ),
                      ],
                    ),
                  ),
                ),
flutter flutter-layout
1个回答
0
投票

将小部件的flex更新为1。尽管添加了Expanded,但尚未指示其子级必须占用或不占用的剩余空间。

请参见下面的示例。 Container小部件的添加仅是为了控制或限制扩展到两端(水平)的小部件的宽度。

main.dart

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 450, // Depending on the screen your targetting
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  color: Colors.blueAccent[100],
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        flex: 0,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "Title:",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 15,
                              color: Colors.black87,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1, // Update flex
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.black87,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  color: Colors.yellowAccent[100],
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        flex: 0,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "Name:",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 15,
                              color: Colors.black87,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "Juan dela Cruz",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.black87,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  color: Colors.redAccent[100],
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        flex: 0,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "Address:",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 15,
                              color: Colors.black87,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Text(
                            "Metro Manila",
                            softWrap: true,
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.black87,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Run on DartPad

© www.soinside.com 2019 - 2024. All rights reserved.