Flutter 中的布局

Question

我是 Flutter 的新手，目前正在练习布局选项。我需要下图中的布局帮助，我使用了一个有 2 个子项的行，2 个列和 4 个文本小部件。第一列包含文本 PASSENGER、CONTACT 等。第二列包含 4 个其他文本小部件 Jessica Hyde、Numbers 和 Luggage（我在一列中嵌套了“3 个大手提箱和 1 个随身携带”文本，在一行中嵌套了文本 'French speaker, smoker'）。

我遇到的问题是它们没有像图片中那样对齐，PASSENGER 与姓名、CONTACT 与号码等对齐。我的结果如下所示：

Row(
   crossAxisAlignment: CrossAxisAlignment.start,
   mainAxisAlignment: MainAxisAlignment.start,
   children: [
     Padding(
       padding: const EdgeInsets.all(8.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
             'PASSENGER',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w500,
               color: Colors.grey[600],
             ),
           ),
           // SizedBox(
           //   height: 10.0,
           // ),
           Text(
             'CONTACT',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w500,
               color: Colors.grey[600],
             ),
           ),
           SizedBox(
             height: 10.0,
           ),
           Text(
             'LUGGAGE',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w500,
               color: Colors.grey[600],
             ),
           ),
           SizedBox(
             height: 20.0,
           ),
           Text(
             'OTHER',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w500,
               color: Colors.grey[600],
             ),
           ),
         ],
       ),
     ),
     Padding(
       padding: const EdgeInsets.only(
         left: 12.0,
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
             'Wade Wilson',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w600,
               color: Colors.grey[500],
             ),
           ),
           Text(
             '+1 212+759-3000',
             style: TextStyle(
               fontSize: 15.0,
               fontWeight: FontWeight.w600,
               color: Colors.grey[500],
             ),
           ),
           SizedBox(
             height: 10.0,
           ),
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
                 '3 big suitcases',
                 style: TextStyle(
                   fontSize: 15.0,
                   fontWeight: FontWeight.w600,
                   color: Colors.grey[500],
                 ),
               ),
               SizedBox(
                 height: 2.0,
               ),
               Text(
                 '1 carry on',
                 style: TextStyle(
                   fontSize: 15.0,
                   fontWeight: FontWeight.w600,
                   color: Colors.grey[500],
                 ),
               ),
             ],
           ),
           SizedBox(
             height: 10.0,
           ),
           Row(
             children: [
               Text(
                 'French speaker, ',
                 style: TextStyle(
                   fontSize: 15.0,
                   fontWeight: FontWeight.w600,
                   color: Colors.grey[500],
                 ),
               ),
               Text(
                 'smoker',
                 style: TextStyle(
                   fontSize: 15.0,
                   fontWeight: FontWeight.w600,
                   color: Colors.grey[500],
                 ),
               ),
             ],
           ),
         ],
       ),
     ),
   ],
 );

解决此问题的最佳方法是什么？预先感谢您的帮助！

Answer 1

我认为您需要将宽度传递给第一个文本。 Ty 下面一行它会帮助你

                                      return Scaffold(
                                      body: SafeArea(
                                        child: Container(
                                            child: Column(
                                              mainAxisAlignment: MainAxisAlignment.start,
                                              crossAxisAlignment: CrossAxisAlignment.start,
                                              children: [
                                                Text("Passengers Info"),
                                                Container(height: 50,),
                                                Row(
                                                    children: <Widget>[
                                                      Container(width: 5,),
                                                      Container(child: Text("PASSENGER"),width: 100,),
                                                      Expanded(child: Text("Jessica Hyde")),
                                                    ]
                                                ),
                                                Container(height: 5,),
                                                Row(
                                                    children: <Widget>[
                                                      Container(width: 5,),
                                                      Container(child: Text("CONTACT"),width: 100,),
                                                      Expanded(child: Text("+ your number")),
                                                    ]
                                                ),
                                                Container(height: 5,),
                                                Row(
                                                    children: <Widget>[
                                                      Container(width: 5,),
                                                      Container(child: Text("LUGGAGE"),width: 100,),
                                                      Column(
                                                        crossAxisAlignment: CrossAxisAlignment.start,
                                                        children: [
                                                          Text("3 big suitcases"),
                                                          Text("1 carry on"),
                                                        ],
                                                      )
                                                    ]
                                                ),
                                                Container(height: 5,),
                                                Row(
                                                    children: <Widget>[
                                                      Container(width: 5,),
                                                      Container(child: Text("OTHER"),width: 100,),
                                                      Expanded(child: Text("French speaker, smoker")),
                                                    ]
                                                ),
                                              ],
                                            )
                                        ),
                                      )
                                    );

Answer 2

import 'package:flutter/material.dart';

class something extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "The Header",
          style: TextStyle(
              fontSize: 16,
              color: Colors.black87,
              fontWeight: FontWeight.bold),
        ),
        Padding(padding: EdgeInsets.only(top: 20)),
        _forRows(),
        _forRows(),
        _forRows(),
        _forRows(),
      ],
    );
  }
}

Widget _forRows() {
  return Row(
    children: [
      Expanded(
        child: Text(
          "BANANAS1",
          style: TextStyle(fontSize: 16, color: Colors.black87),
        ),
        flex: 2,
      ),
      Expanded(
        child: Text("bananas2"),
        flex: 6,
      )
    ],
  );
}

这可能会解决您的问题。

Flutter 中的布局

Layout In Flutter

mobile

flutter

flutter-layout