如何在 flutter 中使用卡內的列和行

Question

我有一張 flutter 卡，在卡的內部我正在嘗試使用 Column 和 row 設計如下圖所示的東西，但不確定如何同時使用它們，所以如果有人可以幫助我，我將不勝感激關於如何實現這個東西。

      Container(
        height: 100,
        child: Card(
          elevation: 8.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Column(
            children: <Widget>[
              Container(
                height: 30,
                padding: EdgeInsets.all(1),
                child: ListTile(
                  title: Text('US Daily Retail Delieveries by Brand', style: TextStyle(fontSize: 13),),
                  trailing: Icon(Icons.favorite, size: 20,),
                ),
              ),
              Divider(color: Colors.black,),
              Container(
                height: 30,
                child: new ListTile(
                  title: Text("Price")
                ),
              )
            ]
          ),
        ),
      ),

Answer 1

正如您所說，您需要使用列和行。

嘗試使用此代碼來可視化布局，類似於您的圖像。

我添加了一些Padding()只是為文本騰出空間。

您可以將其放在Card()小部件的子級中。

Column(children: [
      Row(children: [
         Text("Row 1"),
         Spacer(),
         Icon(Icons.account_box),
      ]),
      Row(children: [
        Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(children: [
              Text("Data 1 Title"),
              Text("Data 1.1"),
              Text("Data 1.2"),
            ])),
        Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(children: [
              Text("Data 2 Title"),
              Text("Data 2.1"),
              Text("Data 2.2"),
            ])),
        Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(children: [
              Text("Data 3 Title"),
              Text("Data 3.1"),
              Text("Data 3.2"),
            ])),
        Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(children: [
              Text("Data 4 Title"),
              Text("Data 4.1"),
              Text("Data 4.2"),
            ])),
      ]),
    ])

Answer 2

所以你可以使用行和列。 您的結構可能如下所示：

Column(
   children : [
       // A Row for the top
       Row(children: [ Text('Group Name'), Icon(Icons.icon)] ),
       //For the Line 
       Divider(height, thickness etc...),
       // A Row for each Row in the table from now on
       //VerticalDivider for the vertical line, just as Divider
       Row(children :[ Text('price1'),  VerticalDivider(), Text('1')],
       // be carefull with the $ since it's used to put variables 
       // into strings, eg Text('Name : $name ')
       ),
    ],
),

您也可以為此使用表格小部件。