如何用两个按钮填充行?

时间:2019-05-02 22:08:26

标签: dart flutter

如何使两个按钮在导航抽屉的整个宽度上平均展开?


Actual vs Required

4 个答案:

答案 0 :(得分:1)

这对我有用

Row(
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    Route route =
                        MaterialPageRoute(builder: (context) => MinionFlare());
                    Navigator.push(context, route);
                  },
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width * 0.4,
                    child: Text("Minion"),
                  ),
                ),
                RaisedButton(
                  onPressed: () {
                    Route route = MaterialPageRoute(
                        builder: (context) => EmojiRatingBar());
                    Navigator.push(context, route);
                  },
                  child: SizedBox(
                      width: MediaQuery.of(context).size.width * 0.4,
                      child: Text("Emoji")),
                ),
              ],
            ),

答案 1 :(得分:0)

主要是

        ListTile(
          title: Row(
            children: <Widget>[
              Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
              Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
            ],
          ),
        )

Result


完整代码

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
            ListTile(
              //contentPadding: EdgeInsets.all(<some value here>),//change for side padding
              title: Row(
                children: <Widget>[
                  Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
                  Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

答案 2 :(得分:0)

Container(
            height: 100,
            child: Row(
              children : <Widget>[
              Expanded(
                  child: RaisedButton(
                          onPressed: () {},
                          color: Color(0xff0000ff),
                          child: Text("Left Button", style: TextStyle(color: Colors.white),)
                        )
                      ),
              Expanded(
                  child: RaisedButton(
                          onPressed: () {},
                          color: Color(0xffd4d4d4),
                          child: Text("Right Button")
                        )
                      ),
              ])
          )

答案 3 :(得分:-1)

您可以在每个按钮上加上“展开”。

Row(
children : <Widget>[
 Expanded(
    child: Button(
            child: Text("Clear")
           )
         ),
Expanded(
    child: Button(
            child: Text("Filter")
           )
         ),
])