我正在嘗試使用 Flutter 開發應用程式。我是新來的:(
我無法在 gridView 下添加按鈕。
這是我的代碼：
body: Container(
height: 300,
width: 300,
margin: const EdgeInsets.only(left: 47.0, top: 100),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView(children: [
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.router, size: 40, color: Colors.white),
Text("DFGW", style: TextStyle(color: Colors.white, fontSize: 20))
],),),
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.route_rounded, size: 40, color: Colors.white),
Text("WAN", style: TextStyle(color: Colors.white, fontSize: 20))
],),),
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.vpn_lock, size: 40, color: Colors.white),
Text("VPN", style: TextStyle(color: Colors.white, fontSize: 20))
],),),
Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.language, size: 40, color: Colors.white),
Text("INTERNET", style: TextStyle(color: Colors.white, fontSize: 20))
],),),
],
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10),),
)),
bottomNavigationBar: Container(
child: OutlinedButton(
style: OutlinedButton.styleFrom(
backgroundColor: Colors.white,
fixedSize: const Size(100, 100)
),
child: Text("Start Checking", style: TextStyle(fontSize: 20.0, color: Colors.black,),),
onPressed: () {},
),
),
這是我現在的輸出。
我希望按鈕正好在網格下方，我該怎么辦？
在此先感謝您的幫助！
uj5u.com熱心網友回復：
如果我理解正確，我想你想在 gridview 孩子的正下方添加按鈕？如果那時你可以用 Column 包裝你的 Container 并像這樣把按鈕作為第二個孩子，
body: Column(
children:[
Container(
height: 300,
width: 300,
margin: const EdgeInsets.only(left: 47.0, top: 100),
child: // your grid view..
),
YourButtonWidget(), // and your button
],
),
uj5u.com熱心網友回復：
很多好方法可以做到這一點。查看Column小部件并注意屬性 MainAxisSize 和 CrossAxisAlignment
并查看靈活和擴展小部件
我會花更多時間瀏覽 Flutter 的小部件，以真正熟悉您手頭使用 Flutter 構建 UI 的工具
我在這里所做的只是用一列包裹你的 GridView 并在它下面扔一個按鈕
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(const SwitchApp());
class ColorModel extends ChangeNotifier {
Color color = Colors.green;
void setColor(Color color) {
this.color = color;
notifyListeners();
}
}
class SwitchApp extends StatelessWidget {
const SwitchApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<ColorModel>(
create: (context) => ColorModel(),
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Switch Sample')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 300,
width: 300,
margin: const EdgeInsets.only(left: 47.0, top: 100),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.router, size: 40, color: Colors.white),
Text("DFGW",
style: TextStyle(
color: Colors.white, fontSize: 20))
],
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.route_rounded,
size: 40, color: Colors.white),
Text("WAN",
style: TextStyle(
color: Colors.white, fontSize: 20))
],
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.vpn_lock,
size: 40, color: Colors.white),
Text("VPN",
style: TextStyle(
color: Colors.white, fontSize: 20))
],
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.language,
size: 40, color: Colors.white),
Text("INTERNET",
style: TextStyle(
color: Colors.white, fontSize: 20))
],
),
),
],
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10),
),
)),
Center(child: ElevatedButton(onPressed: () {}, child: Text('button')))
],
),
bottomNavigationBar: Container(
child: OutlinedButton(
style: OutlinedButton.styleFrom(
backgroundColor: Colors.white,
fixedSize: const Size(100, 100)),
child: Text(
"Start Checking",
style: TextStyle(
fontSize: 20.0,
color: Colors.black,
),
),
onPressed: () {},
),
),
),
),
);
}
}
class SwitchExample extends StatefulWidget {
const SwitchExample({super.key});
@override
State<SwitchExample> createState() => _SwitchExampleState();
}
class _SwitchExampleState extends State<SwitchExample> {
bool light = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
Switch(
// This bool value toggles the switch.
value: light,
activeColor: Colors.red,
onChanged: (bool value) {
// This is called when the user toggles the switch.
setState(() {
light = value;
});
Provider.of<ColorModel>(context, listen: false)
.setColor(value ? Colors.green : Colors.blue);
},
),
MyText()
],
);
}
}
class MyText extends StatelessWidget {
const MyText({super.key});
@override
Widget build(BuildContext context) {
return Consumer<ColorModel>(builder: (context, state, _) {
return Text('Change my color', style: TextStyle(color: state.color));
});
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/532204.html
標籤：扑镖按钮颤振布局
上一篇：addEventListener僅適用于一個按鈕（多頁）
下一篇：tkinter標簽和按鈕網格放置