Question

我正在第一个辅助项目中工作，我对如何根据设备屏幕处理窗口小部件的大小有疑问。

在iPhone 11中看起来很棒，但是当我在Nexus 5中模拟它时，一切变得如此……印刷，输入，按钮... :(

您认为始终拥有一个不错的UI是最有效的方法（在大多数情况下可以）？

谢谢！

编辑：这是主页的代码:)

  Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Theme.of(context).backgroundColor,
    child: SafeArea(
        child: Container(
          padding: EdgeInsets.all(30),
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
            Flexible(
              flex: 2,
              child: BounceInDown(
                from: 10,
                child: Container(
                  alignment: Alignment.topLeft,
                  child: Container(
                    child: SvgPicture.asset(
                      'assets/svg/twiger-face.svg',
                      color: Theme.of(context).accentColor,
                      alignment: Alignment.topLeft,
                      width: 100,
                      height: 100
                    )
                  )
                ),
              ),
            ),
            Flexible(
              flex: 6,
              child: Column(
                children: <Widget>[
                  FadeInDown(
                    from: 10,
                    child: _createTitle(AppLocalizations.of(context).translate("home_title"))
                  ),
                  SizedBox(height: 15.0),
                  FadeInUp(
                    from:5,
                    child: _createForm()
                  ),
                  if(isValidTweet(textController.text))
                  _validTweetMessage(),
                  if(!isValidTweet(textController.text) && textController.text != '')
                  _invalidTweetMessage(),                      
                ]
              ),
            ),
            Flexible(
              flex: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:[
                  Container(
                    child: RawMaterialButton(
                      padding: EdgeInsets.all(10),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)
                      ),
                      child: RichText(
                        text: TextSpan(
                          style: TextStyle(color: Theme.of(context).accentColor),
                          children: <TextSpan>[
                            TextSpan(text: AppLocalizations.of(context).translate("feedback_btn")), 
                            TextSpan(text: "Feedback", style: TextStyle(fontWeight: FontWeight.w700))
                          ]
                        ),
                      ),
                      onPressed: (){
                        _showFeedbackModal(context);
                      },
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        BounceInDown(
                          from: 10,
                          child: _createPasteTweetBtn(context)
                        ),
                        SizedBox(width: 20),
                        BounceInDown(
                          from: 10,                   
                          child: _createSendTweetBtn(context, _formKey, textController)), 
                      ]
                    ),
                  ),
                ]
              ),
            )  
          ],),
        ),
      ),
  ),
);
}

Answer 1

您可以将BuildContext context与MediaQuery一起使用，以获取当前设备的屏幕尺寸，并可以基于该值设置小部件的尺寸。
例如：

var width = MediaQuery.of(context).size.width  * 0.4; // set width to 40% of the screen width
var height = MediaQuery.of(context).size.height  * 0.4; // set height to 40% of the screen height

在Flutter中处理屏幕尺寸的最佳方法是什么？

1 个答案: