问题
Help me Guys I am new to the flutter development I am trying to make this type of layout here is the layout I wanted but I am getting this layout
Look of the layout is this here is my code friends please help out friends I had started the development of the flutter recently guys I had tried the fitted box and expanded class as well
Home.dart
class HomeScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
HomeScreen_Page homecreatestate() => HomeScreen_Page();
return homecreatestate();
}
}
class HomeScreen_Page extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
backgroundColor: primarycolor,
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text('Ayub Baba'),
accountEmail: new Text('ayubbabants@gmail.com'),
currentAccountPicture: new CircleAvatar(
child: new Text(
'A',
style: new TextStyle(fontSize: 20.0, color: Colors.white),
),
backgroundColor: secondarycolor,
),
decoration: new BoxDecoration(color: primarycolor),
),
new ListTile(
title: new Text('Profile'),
trailing: new Icon(Icons.account_circle),
),
new ListTile(
title: new Text('Contact Us'),
trailing: new Icon(Icons.contact_mail),
),
new ListTile(
title: new Text('Help'),
trailing: new Icon(Icons.help_outline),
),
new ListTile(
trailing: new Icon(Icons.subdirectory_arrow_left),
title: new Text('LogOut'),
)
],
),
),
body: new Builder(builder: (BuildContext context) {
return new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image.asset(
'assets/bg.png',
fit: BoxFit.cover,
),
new Center(
child: new GridView.count(crossAxisCount: 2,
children: <Widget>[
new Center(
child: new Column(
children: <Widget>[
new Text('Send'),
new Text('(Send a courier)')
],
),
),
new Center(
child: new Column(
children: <Widget>[
new Text('Receive'),
new Text('(Track Your Courier)')
],
),
),
new Center(
child: new Column(
children: <Widget>[
new Text('Shopping'),
new Text('(Online Shopping)')
],
),
),
new Center(
child: new Column(
children: <Widget>[
new Text('Payments Bills'),
new Text('(Eletricity,recharges etc)')
],
),
)
],),
)
],
);
}),
),
);
}
}
回答1:
There are a few approaches. You can do it with Row/Column + crossAxisAlignment.stretch + Expanded
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.yellow,
),
),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.purple,
),
),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
),
],
);
Or with GridView and LayoutBuilder
return LayoutBuilder(
builder: (context, constraint) {
return new GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: constraint.maxWidth / constraint.maxHeight,
),
itemBuilder: (context, index) {
return Container(
color: Colors.red,
margin: EdgeInsets.all(4.0),
);
},
);
},
);
回答2:
You can use a GridView and set crossAxisCount to 2. (See Flutter)
new GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: <Widget>[
const Text('He\'d have you all unravel at the'),
const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution is coming...'),
const Text('Revolution, they...'),
],
),
来源：https://stackoverflow.com/questions/50971424/divide-screen-into-4-different-parts-evenly