Flutter - 按钮组样式和位置

Question

我正在尝试创建类似附件图像的内容。我走到这一步......

     Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(32),
              topRight: Radius.circular(32),
            ),
          ),
          child: ButtonTheme(
            child: ButtonBar(
              alignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  onPressed: () => print('hi'),
                  child: Text('Referals'),
                  color: Color(0xff2FBBF0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(15.0),
                        topLeft: Radius.circular(15.0)),
                  ),
                ),
                RaisedButton(
                  onPressed: () => print('hii'),
                  child: Text('Stats'),
                  color: Color(0xff2FBBF0),
                ),
                RaisedButton(
                  onPressed: () => print('hiii'),
                  child: Text('Edit Profile'),
                  color: Color(0xff2FBBF0),
                  // color: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(15.0),
                        topRight: Radius.circular(15.0)),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

但我真的不觉得它看起来像图像。

我还希望按钮组位于容器的顶部。现在他们在绝对的中心。就像它们包裹在 Center 小部件中一样。

Answer 1

这是完整的代码。我刚刚使用了 Container 和 Row ，因为我发现它更合适并且更容易实现而不会让人头疼。 :P

如果你想用 RaisedButton，想办法吧。

来源:

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => new _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("DEMO")),
        body: Padding( // used padding just for demo purpose to separate from the appbar and the main content
            padding: EdgeInsets.all(10),
            child: Container(
              alignment: Alignment.topCenter,
              child: Container(
                  height: 60,
                  padding: EdgeInsets.all(3.5),
                  width: MediaQuery.of(context).size.width * 0.9,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(15)),
                  ),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                        bottomLeft: Radius.circular(12),
                                        topLeft: Radius.circular(12))),
                                child: Text("Referrals",
                                    style: TextStyle(
                                      color: Colors.blue,
                                      fontSize: 17,
                                    )),
                              ))),
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                child: Text("Stats",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 17)),
                              ))),
                      Padding(
                          padding: EdgeInsets.symmetric(vertical: 5),
                          child: Container(color: Colors.white, width: 2)),
                      Expanded(
                          child: InkWell(
                              onTap: () {},
                              child: Container(
                                alignment: Alignment.center,
                                child: Text("Edit Profile",
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 17)),
                              )))
                    ],
                  )),
            )));
  }
}

输出截图: