[英]Flutter Wrap causes right overflow
我有個問題。 我最近開始使用 flutter,我真的很了解這個框架,但是這幾天,我一直在為一個問題苦苦掙扎。 我正在嘗試構建以下頁面:
所以我有這段代碼應該構建它:
import 'package:test/models/choice_chip_data.dart';
import 'package:test/styles/button_style.dart';
import 'package:test/widgets/reservation_person_selection.dart';
import 'package:test/widgets/reservation_time_selection.dart';
import 'package:test/widgets/restaurant_rating.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
final DateFormat formatter = DateFormat('dd-MM-yyyy');
class RestaurantReservationDetailsPage extends StatefulWidget {
@override
_RestaurantReservationDetailsPageState createState() =>
_RestaurantReservationDetailsPageState();
}
class _RestaurantReservationDetailsPageState
extends State<RestaurantReservationDetailsPage> {
DateTime? reservationDateTime;
List<ChoiceChipData> timeChips = [
ChoiceChipData(
label: "17:00",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "17:30",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "18:00",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "18:30",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "19:00",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "19:30",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue),
ChoiceChipData(
label: "20:00",
isSelected: false,
textColor: Colors.black,
selectedColor: Colors.blue)
];
@override
void dispose() {
super.dispose();
}
@override
initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: SafeArea(
child: Stack(children: [
Column(
children: [
Row(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
iconSize: 25,
onPressed: () {
Navigator.pop(context);
},
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Senso Sushi & Grill",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18),
),
RestaurantRating()
],
)
],
)
],
),
Container(
height: 180,
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(90),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromRGBO(229, 229, 229, 1),
Color.fromRGBO(253, 253, 253, 1),
],
)),
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(top: 50, bottom: 50),
child: Image.asset(
"assets/restaurant_logo_sample.png",
),
),
Column(
children: [
Container(
padding: EdgeInsets.only(left: 30, right: 30),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Aantal personen",
style: TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.3),
fontSize: 16)),
SizedBox(height: 5),
CustomNumberInput(),
SizedBox(height: 15),
Text("Datum",
style: TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.3),
fontSize: 16)),
SizedBox(height: 5),
MainButton(
btnText: (reservationDateTime == null
? "Datum kiezen"
: formatter.format(reservationDateTime!)),
btnAction: () => {
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime.now()
.add(Duration(days: 14)))
.then((date) => {
setState(() {
reservationDateTime = date;
})
})
}),
SizedBox(height: 15),
Text("Tijd",
style: TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.3),
fontSize: 16)),
SizedBox(height: 5),
buildChoiceChips(),
],
)
],
),
)
],
)
],
)
])));
}
Widget buildChoiceChips() => Wrap(
runSpacing: 5,
spacing: 5,
children: timeChips
.map((timeChip) => ChoiceChip(
label: Text(timeChip.label),
labelStyle:
TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
onSelected: (isSelected) => setState(() {
timeChips = timeChips.map((otherChip) {
final newChip = otherChip.copy(isSelected: false);
return timeChip == newChip
? newChip.copy(isSelected: isSelected)
: newChip;
}).toList();
}),
selected: timeChip.isSelected))
.toList());
}
我已經閱讀了有關可能導致問題的 Row() 的內容: https://stackoverflow.com/a/58494435/10673107 ,但這對我不起作用!
如何修復溢出?
行導致問題
Container(
padding: EdgeInsets.only(left: 30, right: 30),
child: Row(
children: [
Column(
它提供了 wrap 無限的水平長度,這使 wrap 無需開始在新行中對齊。
將此處的行刪除為這樣的內容
Container(
padding: EdgeInsets.only(left: 30, right: 30),
child: Column(
我建議你使用 Wrap
Wrap(children: [
...,
...
]),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.