在正文下方添加按钮

Question

下面的代码（为了简单起见，我缩短了代码）显示了设备的特性。我把所有的特征都放在了身体里，并以某种方式展现出来。告诉我如何在身体下方制作两个按钮（照片中以红色标记）。还是将它们放入体内？告诉我最好的方法。

return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
  ),

  body: Align(
      alignment: Alignment.topCenter,
      child: Container(
          constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
          decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(5.0),),
          child: SingleChildScrollView(
              child: Card(
                      child: Column(
                        children: [
                          ListTile(
                            title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
                            trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
                          const Divider(color: Colors.black, endIndent: 10, indent: 10),
                          ListTile(
                            title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
                            trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
 ],
          ),
        ),
        )
      ),
    ));

Answer 1

您可以在

bottomNavigationBar

 上使用 

Scaffold

Scaffold(
bottomNavigationBar: Padding(
  padding: const EdgeInsets.all(8.0), //the one you prefer
  child: Row(
    children: [
      Expanded(
        child: OutlinedButton(
          onPressed: () {},
          child: Text("NNNNNN"),
        ),
      ),
      SizedBox(
        //space between button
        width: 16,
      ),
      Expanded(
        child: OutlinedButton(
          onPressed: () {},
          child: Text("NNNNNN"),
        ),
      ),
    ],
  ),
),

此外，您还可以用

Container

小部件

 包裹 

Column

 body: Column(
        children: [
         Container(...)//your widget
           Padding(
            padding: const EdgeInsets.all(8.0), //the one you prefer
            child: Row(
               children: [
                Expanded(child: OutlinedButton(...)),
                SizedBox(width:x),
                Expanded(child: OutlinedButton(...)),
           

第二种方法的完整片段

  return Scaffold(
      body: Column(
        children: [
          Container(
              constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(5.0),
              ),
              child: SingleChildScrollView(
                child: Card(
                  child: Column(
                    children: [
                      ListTile(
                          title: const Text('Brand:',
                              style: TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 25)),
                          trailing: Text('${device.brand} ',
                              style: const TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 20))),
                      const Divider(
                          color: Colors.black, endIndent: 10, indent: 10),
                      ListTile(
                          title: const Text('Operation system:',
                              style: TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 25)),
                          trailing: Text('${device.operation_system} ',
                              style: const TextStyle(
                                  fontWeight: FontWeight.w400, fontSize: 20))),
                    ],
                  ),
                ),
              )),
          // Spacer(), /// you you want at the bottom
          Padding(
            padding: const EdgeInsets.all(8.0), //the one you prefer
            child: Row(
              children: [
                Expanded(
                  child: OutlinedButton(
                    onPressed: () {},
                    child: Text("NNNNNN"),
                  ),
                ),
                SizedBox(
                  //space between button
                  width: 16,
                ),
                Expanded(
                  child: OutlinedButton(
                    onPressed: () {},
                    child: Text("NNNNNN"),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );

您可以查看有关小部件、列和布局的更多信息。