我还没有能够弄清楚如何修复按钮的大小,因为我拖动和调整应用程序,所有其他小部件工作正常,但按钮会给予溢出错误,也请做建议,我知道这是一个问题的按钮高度,我想使文本小,因为我调整它的大小到小。还有,如果有其他方法使应用程序响应?也就是说,所有移动的尺寸和屏幕,包括web和iPad?
请帮我更新我的代码,这是我到目前为止的代码:总的来说,我想要一个答案,以及如何接近一个响应式设计的建议?
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
double screenWidth = MediaQuery.of(context).size.width;
return OrientationBuilder(builder: (context, orientation) {
final isLandscape = orientation == Orientation.landscape;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height * 0.25,
width: MediaQuery.of(context).size.width * 0.7,
margin: const EdgeInsets.only(top: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.green,
width: MediaQuery.of(context).size.width * 0.1,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ButtonFlightPlanWindow(text: 'Procedures', fn: procedure),
ButtonFlightPlanWindow(text: 'Procedure', fn: procedure),
ButtonFlightPlanWindow(text: 'Procedu', fn: procedure),
ButtonFlightPlanWindow(text: 'Pro', fn: procedure),
],
),
),
Container(
color: Colors.red,
width: MediaQuery.of(context).size.width * 0.58,
height: screenHeight * 0.3,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Center(
child: Text(
"Routes",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
Container(
height: MediaQuery.of(context).size.width * 0.05,
width: MediaQuery.of(context).size.width * 0.58,
color: Colors.blue,
)
],
),
)
],
)),
);
});
}
void procedure() {}
}
class ButtonFlightPlanWindow extends StatelessWidget {
String text;
void Function() fn;
ButtonFlightPlanWindow({
Key? key,
required this.text,
required this.fn,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final buttonWidth = screenWidth < 500 ? screenWidth * 0.8 : 200.0;
return SizedBox(
width: buttonWidth,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
const Color.fromARGB(255, 62, 84, 122),
),
),
onPressed: fn,
child: Text(text),
),
);
}
}
1条答案
按热度按时间sd2nnvve1#
我相信你的按钮没有遵守你对它的高度/宽度的改变,因为它在一个容器中,所以它有来自其父容器的约束。此容器的宽度为“width:MediaQuery.of(context).size.width * 0.1”,但按钮的宽度screenWidth * 0.8或200。尝试更改按钮所在容器中的大小定义。
同样在响应式Flutter设计方面,你做得很好,总是尝试使用mediaQuery或其他方式来动态地获取小部件的大小,这将使你的小部件比例在几乎每一部手机上都很好。