Question

我正在创建具有5个按钮的UI。其中之一应居中，其宽度应为屏幕的50％。高度应为相同大小（应为圆形）。我尝试使用MediaQuery.of(context).size.width，但不起作用。

这是我最近得到的：

代码是：

Widget _playButton() {
    return FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 0.5, // I know this is wrong
      child: Container(
        alignment: new FractionalOffset(0.0, 0.0),
        color: Colors.red,
        /*decoration: new BoxDecoration(
          color: hexToColor('#E8532E'),
          shape: BoxShape.circle,
        ),*/
        child: Center(
          child: Text(
            "PLAY",
            style: TextStyle(fontSize: 20.0, color: Colors.white),
          ),
        ),
      ),
    );
  }

我有此按钮的容器：

Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        body: new Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[_myScreenOptions(), _playButton()],
        ),
      ),
    );
  }

显然，其余按钮应该可以单击。

Answer 1

如果您想创建一个圆形按钮，则不必担心宽度和高度，只给一个尺寸就够了...或者您也可以像以前一样使用 FractionallySizedBox 。

代码输出：

示例代码：

import 'package:flutter/material.dart';

class SampleCenterButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            _myScreenOptions(),
            _playButton(),
          ],
        ),
      ),
    );
  }

  _playButton() {
    return GestureDetector(
      onTap: () {
        print("Play game");
      },
      child: FractionallySizedBox(
        widthFactor: 0.5,
        child: Container(
          // defining one dimension works as well, as Flutter knows how to render a circle.
//        width: MediaQuery.of(context).size.width/2,
          decoration: BoxDecoration(
            color: Colors.red,
            shape: BoxShape.circle,
          ),
          child: Center(
            child: Text(
              "PLAY",
              style: TextStyle(fontSize: 30, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

  _myScreenOptions() {
    return Column(
      children: <Widget>[
        buildRow([
          buildOption(Color(0xff1D4554), Icons.person, "Teams"),
          buildOption(Color(0xff229B8D), Icons.folder_open, "Pets"),
        ]),
        buildRow([
          buildOption(Color(0xffE7C16A), Icons.videogame_asset, "Modes"),
          buildOption(Color(0xffF2A061), Icons.settings, "Options"),
        ]),
      ],
    );
  }

  Widget buildOption(Color bgColor, IconData iconData, String title) {
    return Expanded(
      child: Container(
        color: bgColor,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              iconData,
              size: 80,
            ),
            Text(
              title,
              style: TextStyle(fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }

  buildRow(List<Widget> buttons) {
    return Expanded(
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: buttons,
      ),
    );
  }
}

颤振-中心按钮

1 个答案: