我想制作一個相鄰有 2 列的螢屏。這兩列都將有一個動態的 listview.builder 和一個 textinput，因此我可以輸入新值并在這些串列視圖中顯示它們。這是一個飛鏢游戲計算器，我可以跟蹤我之前扔的東西。當我將下面的代碼與 body: Column 一起使用時（所以 1 列具有動態 listview.builder 和 textinput 它可以作業）但是當我將它包裝成一行和 2 列時，我收到以下錯誤。RenderBox 未布置：RenderShrinkWrappingViewport#5063b relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
這里有一些代碼供您試用。如果您想讓它失敗，請取消注釋 Expanded 和 Textinput。
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 MaterialApp(
debugShowCheckedModeBanner: false,
home: GamePage(),
);
}
}
class GamePage extends StatefulWidget {
const GamePage({super.key});
@override
State<GamePage> createState() => _GamePageState();
}
class _GamePageState extends State<GamePage> {
List<String> thrownScoresOne = [];
List<String> thrownScoresTwo = [];
int playerOne501 = 501;
int playerTwo501 = 501;
final TextEditingController _playerOneScoreController =
TextEditingController();
final TextEditingController _playerTwoScoreController =
TextEditingController();
@override
void dispose() {
_playerOneScoreController.dispose();
_playerTwoScoreController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Game"),
),
body: SafeArea(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 32),
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Container(
child: Text("Player one"),
),
Container(
child: Text(playerOne501.toString()),
),
// Expanded(
// child: ListView.builder(
// shrinkWrap: true,
// itemCount: thrownScoresOne.length,
// itemBuilder: (BuildContext context, int index) {
// return Text(thrownScoresOne[index]);
// }),
// ),
// Flexible(
// child: Container(
// child: TextField(
// controller: _playerOneScoreController,
// decoration: InputDecoration(
// hintText: "Score",
// border: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// focusedBorder: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// enabledBorder: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// filled: true,
// contentPadding: const EdgeInsets.all(8),
// ),
// onSubmitted: (text) {
// thrownScoresOne.add(text);
// _playerOneScoreController.clear();
// setState(() {});
// },
// ),
// ),
// ),
],
),
Column(
children: [
Container(
child: Text("Player two"),
),
Container(
child: Text(playerTwo501.toString()),
),
// Expanded(
// child: ListView.builder(
// shrinkWrap: true,
// itemCount: thrownScoresTwo.length,
// itemBuilder: (BuildContext context, int index) {
// return Text(thrownScoresTwo[index]);
// }),
// ),
// Flexible(
// child: Container(
// child: TextField(
// controller: _playerTwoScoreController,
// decoration: InputDecoration(
// hintText: "Score",
// border: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// focusedBorder: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// enabledBorder: OutlineInputBorder(
// borderSide: Divider.createBorderSide(context)),
// filled: true,
// contentPadding: const EdgeInsets.all(8),
// ),
// onSubmitted: (text) {
// thrownScoresTwo.add(text);
// _playerTwoScoreController.clear();
// setState(() {});
// },
// ),
// ),
// ),
],
),
],
),
),
),
);
}
}
我試過使用 singlescrollview 但這也無濟于事。
uj5u.com熱心網友回復：
Column用 Expanded 小部件包裝行。
class _GamePageState extends State<GamePage> {
List<String> thrownScoresOne = [];
List<String> thrownScoresTwo = [];
int playerOne501 = 501;
int playerTwo501 = 501;
final TextEditingController _playerOneScoreController =
TextEditingController();
final TextEditingController _playerTwoScoreController =
TextEditingController();
@override
void dispose() {
_playerOneScoreController.dispose();
_playerTwoScoreController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Game"),
),
body: SafeArea(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 32),
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
children: [
Container(
child: Text("Player one"),
),
Container(
child: Text(playerOne501.toString()),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: thrownScoresOne.length,
itemBuilder: (BuildContext context, int index) {
return Text(thrownScoresOne[index]);
}),
),
Flexible(
child: Container(
child: TextField(
controller: _playerOneScoreController,
decoration: InputDecoration(
hintText: "Score",
border: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
focusedBorder: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
enabledBorder: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
filled: true,
contentPadding: const EdgeInsets.all(8),
),
onSubmitted: (text) {
thrownScoresOne.add(text);
_playerOneScoreController.clear();
setState(() {});
},
),
),
),
],
),
),
Expanded(
child: Column(
children: [
Container(
child: Text("Player two"),
),
Container(
child: Text(playerTwo501.toString()),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: thrownScoresTwo.length,
itemBuilder: (BuildContext context, int index) {
return Text(thrownScoresTwo[index]);
}),
),
Flexible(
child: Container(
child: TextField(
controller: _playerTwoScoreController,
decoration: InputDecoration(
hintText: "Score",
border: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
focusedBorder: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
enabledBorder: OutlineInputBorder(
borderSide: Divider.createBorderSide(context)),
filled: true,
contentPadding: const EdgeInsets.all(8),
),
onSubmitted: (text) {
thrownScoresTwo.add(text);
_playerTwoScoreController.clear();
setState(() {});
},
),
),
),
],
),
),
],
),
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/526216.html
上一篇：在listviewbuilder中獲取2個彼此相鄰的影像，而不是1個
下一篇：如何在命名路由顫動中推送多個引數