UI 布局问题

Question

我正在努力解决颤振中的布局格式。我的问题是在轮播滑块之后，空间比我需要的要大。构建布局以避免未来问题的最佳方法是什么。

谢谢

而且我意识到我的帖子主要是代码，所以必须写本节，有没有办法避免这种情况，因为我想发布我的完整代码以保持清晰

class HomeScreen extends StatefulWidget {
final String name;
HomeScreen({Key key, @required this.name}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final List<String> hotelCategories = StubData().hotelCategories;
int checkedItem = 0;
var _current = 0;
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color.fromRGBO(70, 109, 69, 1.0),
title: Text("Home"),
),
drawer:  SideDrawer(user:widget.name),
body: Padding(
padding: EdgeInsets.fromLTRB(10.0,0,10.0,0),
child: ListView(
children: <Widget>[
SizedBox(height: 5.0),
Text("Sponsored ",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.black,
),
),
SizedBox(height: 10.0),
CarouselSlider(
options: CarouselOptions(
height: MediaQuery.of(context).size.height/2.4,
autoPlay: true,//
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}
),
items: map<Widget>(
foods,
(index, i){
Map food = foods[index];
return SliderItem(
img: food['img'],
name: food['name'],
desc: food['desc'],
rate: food['rate'],
);
},
).toList(),
),
Container(
height: 32,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
checkedItem = index;
});
},
child: AnimatedContainer(
duration: Duration(milliseconds: 400),
height: double.infinity,
margin: EdgeInsets.only(
left: index == 0 ? 20 : 5, right: 5),
child: Center(
child:
Padding(padding: const EdgeInsets.symmetric(horizontal: 10),
child: Text(
hotelCategories[index],
style: TextStyle(
//color: index == checkedItem
//? Colors.white
// : themeData.accentColor),
),
),
),
),
));
},
))],
),
),
),
);
}
}

Answer 1

要解决此问题，请缩小轮播滑块的项目，您可以使其成为ssizeBox的子项，也可以使其成为灵活小部件的子项并使用列而不是列表视图 我希望这能解决您的问题

Answer 2

希望这有帮助

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Color.fromRGBO(70, 109, 69, 1.0),
title: Text("Home"),
),
drawer:  SideDrawer(user:widget.name),
body: Padding(
padding: EdgeInsets.fromLTRB(10.0,0,10.0,0),
child: Column(
children: <Widget>[
SizedBox(height: 5.0),
Text("Sponsored ",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.black,
),
),
SizedBox(height: 10.0),
Expanded(child:
CarouselSlider(
options: CarouselOptions(
autoPlay: true,//
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}
),
items: map<Widget>(
foods,
(index, i){
Map food = foods[index];
return SliderItem(
img: food['img'],
name: food['name'],
desc: food['desc'],
rate: food['rate'],
);
},
).toList(),
)),
Container(
height: 32,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
checkedItem = index;
});
},
child: AnimatedContainer(
duration: Duration(milliseconds: 400),
height: double.infinity,
margin: EdgeInsets.only(
left: index == 0 ? 20 : 5, right: 5),
child: Center(
child:
Padding(padding: const EdgeInsets.symmetric(horizontal: 10),
child: Text(
hotelCategories[index],
style: TextStyle(
//color: index == checkedItem
//? Colors.white
// : themeData.accentColor),
),
),
),
),
));
},
))],
),
),
),
);
}