Question

我在尝试对齐小部件时遇到问题。左侧对齐正确，但右侧略有偏离。

这是我的代码

这是卡片视图的代码

ListView itemList(List<IncomeData> items, AppDatabase database, BuildContext context) {
    return ListView(
      children: items.map((IncomeData income) {
        return Container(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0,5.0),
            child: new Card(  //listView(income),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0,0.0),
                child: new Column(
                  children: <Widget>[
                    listView(income),
                    new ButtonBar(
                      children: <Widget>[
                        new RaisedButton.icon(
                          label: const Text('Edit'),
                          icon: Icon(Icons.edit,),
                          color: colorPrimary,
                          onPressed: () {
                            _navigateAndDisplaySelection(context, income);
                           /* Navigator.push(context,
                              MaterialPageRoute(builder: (context) => AddEditIncomeForm(incomeData: income)));*/
                            },
                        ),
                        new RaisedButton.icon(
                          label: const Text('Delete'),
                          icon: Icon(Icons.delete),
                          color: colorPrimary,
                          onPressed: () {
                            //database.deleteEntry(income);
                            //deleteConfirmation(income, database);
                            showDialog(
                              context: context,
                              builder: (context) {
                                return CheckBoxAlertDialog(transactionType: delete, data: income, database: database,);
                              }
                            );
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            )
          )
        );
      }).toList(),
    );
  }

这是名片视图内容的代码


    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text(common_functions(incomeList.dateReceived.toString()),
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
            Spacer(),

            //Expanded(child: SizedBox()),
            Text("Not Received"),

            Switch(
              value: isSwitched,
              onChanged: (value) {
                setState(() {
                  isSwitched = value;
                  print(isSwitched);
                });
              },
              activeTrackColor: Colors.lightGreenAccent,
              activeColor: Colors.green,
            ),
          ]
        ),
        Row(
          children: <Widget>[
            CircleAvatar(
              backgroundColor: green,
              child: Icon(Icons.attach_money, color: white,),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(incomeList.category,
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
                    Text(incomeList.frequency + " | " + incomeList.depositAcct, style: TextStyle(color: grey, fontSize: 15)),
                  ],
                ),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Text("\$" + incomeList.expectedAmount.toStringAsFixed(2),
                    style: TextStyle(fontSize: 18, color: green , fontWeight: FontWeight.bold ) ),
                Text(incomeList.status,  style: TextStyle(color: grey, fontSize: 15)),
              ],
            ),
          ],
        ),
      ],
    );

如果您看所附图片，按钮和顶部开关未正确对准数字$ 68.00。看到我画的红线。顶部的开关向左偏移了几个空格，底部的按钮也未精确对准68.00美元

我做错了什么，因为小部件未对准红线，因为$ 68.00是吗？如何更改代码以正确对齐右侧的所有小部件？预先感谢

Answer 1

对于ButtonBar，它是buttonPadding参数。只需确保不要使用任何水平填充（右侧或左侧），因为它将在按钮之间将其拆分。您必须为ButtonBar内的按钮添加一个左填充。

我已经为它和Switch小部件附加了一个示例，该示例没有任何属性可以修改此行为，但是您始终可以使用Transform.translate来克服这一问题。

Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Transform.translate(
                    offset: Offset(10.0, 0.0),
                    child: Switch(
                      value: true,
                      onChanged: (value) {},
                      activeTrackColor: Colors.lightGreenAccent,
                      activeColor: Colors.green,
                    ),
                  ),
                ],
              ),
              ButtonBar(
                buttonPadding: EdgeInsets.zero,
                children: <Widget>[
                  RaisedButton.icon(
                    label: const Text('Edit'),
                    icon: Icon(
                      Icons.edit,
                    ),
                    color: Colors.blue,
                    onPressed: () {},
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: RaisedButton.icon(
                      label: const Text('Delete'),
                      icon: Icon(Icons.delete),
                      color: Colors.blue,
                      onPressed: () {},
                    ),
                  ),
                ],
              ),

在窗口中向左和向右对齐窗口小部件

1 个答案: