Question

我有一张颤振卡，在卡的内部，我试图使用“列”和“行”来设计如下图所示的图像，但不确定如何同时使用它们，因此如果有人使用，将不胜感激可以帮助我实现这一目标。

      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

因此您可以使用行和列。您的结构可能如下所示：

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

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

Answer 2

正如您所说，您需要使用“列和行”。

尝试使用此代码以可视化布局，类似于图像。

我添加了一些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"),
            ])),
      ]),
    ])

如何在颤振中使用卡内的列和行

2 个答案: