0

我正在开发一个计算器 UI。我编写的代码渲染得非常好,但调试该代码后我遇到的主要问题是计算器 UI 在大多数具有低屏幕分辨率的设备(如 moto g4、galaxy s5、iphone 5 等)中不可见. 我在我的代码中使用了 MediaQuerySafeArea小部件,但仍然无法修复它。这是我在moto g4中渲染的UI图片。这是我的计算器 UI 的代码,

import 'package:flutter/material.dart';
import 'package:gstcalculator/buttons.dart';
import 'package:gstcalculator/gstbuttons.dart';
    
void main(){
  runApp(
    MaterialApp(
      home: GSTCalculatorApp()
    )
  );
}

class GSTCalculatorApp extends StatefulWidget {
  

  @override
  _GSTCalculatorState createState() => _GSTCalculatorState();
}

class _GSTCalculatorState extends State<GSTCalculatorApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      
      debugShowCheckedModeBanner: false,
      title: "GST Calculator",
      
      home: SafeArea(
        
        child: Scaffold(
          
          
          backgroundColor: Color(0xFF13131b),
          appBar: AppBar(
            title: Center(child: Text('GST Calculator')),
            backgroundColor: Colors.black54,
          ),
        
          body: Container(
            width: MediaQuery.of(context).size.width *1.0,
            height: MediaQuery.of(context).size.height *0.5 ,
        
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  padding: EdgeInsets.only(right: 15),
                  child: Text('41 x 3', style: TextStyle(fontSize: 30,color: Colors.white54),),
                  alignment: Alignment(1.0, 1.0),
                ),
        
                Container(
                  padding: EdgeInsets.all(15),
                  child: Text('123',style: TextStyle(color: Colors.white,fontSize: 70),),
                  alignment: Alignment(1.0, 1.0),
                ),
        
                Container(
                  // height: 80,
                  // width: 1000,
                  color: Color(0xFF0f0f0f),
        
                  child: Row(
        
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    
                    children: [
                      
                      
                      Gstbutton(gstbtntext: 'CHECK ➞',),
                      Gstbutton(gstbtntext: 'CORRECT ☒',),
                      Gstbutton(gstbtntext: 'CHANGE GST %',),
                    ],
                  ),
        
                
                  
                  ),
        
                
        
        
        
        
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              
                  children: [
                    Button(btntext: '3%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '5%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '8%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '18%',btntextsize: 18,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '28%',btntextsize: 18,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
               
                  ],
        
                ),
                
        
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        
                  children: [
                    Button(btntext: '-3%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '-5%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '-8%',btntextsize: 20,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '-18%',btntextsize: 15.9,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
                    Button(btntext: '-28%',btntextsize: 15.9,btncolor: 0xFF0d0d0d,btntextcolor: 0xFF4DE2C8,),
               
                  ],
        
                ),
        
        
        
        
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Button(btntext: '7',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '8',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '9',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: 'C',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '⌫',btntextsize:30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                  ],
                ),
        
                
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Button(btntext: '4',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '5',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '6',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: 'X',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                    Button(btntext: '/',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                  ],
                ),
        
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Button(btntext: '1',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '2',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '3',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '+',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                    Button(btntext: '-',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                  ],
                ),
        
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  
        
                  children: [
                    Button(btntext: '0',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '00',btntextsize: 30,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '.',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFFFFFFF,),
                    Button(btntext: '=',btntextsize: 35,btncolor: 0xFF0d0d0d,btntextcolor: 0xFFD2353B,),
                    Button(btntext: '%',btntextsize: 35,btncolor: 0xFF0d0d0d, btntextcolor: 0xFFD2353B,),
               
                  ],
        
                ),
        
        
              ],
            ),
          ),
        ),
      ),
      
    );
  }
}
4

1 回答 1

0

列内用扩展小部件替换 3 个子容器。

对 gstbutton 做同样的事情,用 Expanded 小部件包裹 3 个 Gst 按钮。

于 2022-01-12T07:45:31.097 回答