英文:
Flutter ListView with fixed width and max available height as child of a Row inside a Column
问题
我想构建以下小部件的配置:
我无法弄清楚代码。
我只知道Container和SizedBox作为指定子项大小的选项,但将ListView作为子项时,高度设置为无限不起作用。
我无法理解为什么Row不会限制具有无限高度的SizedBox包装器的实际可用高度。屏幕不会限制其内容吗?
更新:
我的代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Column(
children: [
TopBar(),
Row(
children: [
myListView(),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
],
),
),
),
);
}
class myListView extends StatelessWidget {
const myListView({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: double.infinity,
child: Expanded(
child: ListView(
children: [
someListItem(),
someListItem(),
],
),
),
);
}
}
我的答案部分基于@bakboem的答案。
英文:
I want to construct the following configuration of widgets:
and I can't figure the code out.
I only know of Container and SizedBox as options for specifying the size of a child, but with ListView as the child, infinity for height does not work.
I can't figure why Row doesn't constrain eg. a SizedBox wrapper with height of infinity to the actual height that is available. Does the screen not constrain it's content?
Update:
My code was this:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Column(
children: [
TopBar(),
Row(
children: [
myListView(),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
],
),
),
),
);
}
class myListView extends StatelessWidget {
const myListView({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: double.infinity,
child: Expanded(
child: ListView(
children: [
someListItem(),
someListItem(),
],
),
),
);
}
}
The solution in my answer is partly based on @bakboem's answer.
答案1
得分: 1
// 你应该设置宽度。Expanded 只继承高度。
import 'package:flutter/material.dart';
import 'package:koreajob/styles/app_size.dart';
void main(List<String> args) {
runApp(MyWidget());
}
class MyWidget extends StatefulWidget {
MyWidget({Key? key}) : super(key: key);
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
Expanded(
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 100,
itemBuilder: (context, index) =>
ListTile(title: Text('$index'))),
),
Expanded(child: Text('ok'))
],
))
],
));
}
}
英文:
- You should set the width. Expanded only inherits the height.
import 'package:flutter/material.dart';
import 'package:koreajob/styles/app_size.dart';
void main(List<String> args) {
runApp(MyWidget());
}
class MyWidget extends StatefulWidget {
MyWidget({Key? key}) : super(key: key);
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
Expanded(
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 100,
itemBuilder: (context, index) =>
ListTile(title: Text('$index'))),
),
Expanded(child: Text('ok'))
],
))
],
));
}
}
答案2
得分: 0
以下是已翻译的内容:
所以最终有效的是这个:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Column(
children: [
TopBar(),
Expanded( //唯一的变化!!!!!!!!!!!!!!!
child: Row(
children: [
myListView(),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
), //我认为这是扩展的闭合括号...
],
),
),
),
);
}
class myListView extends StatelessWidget {
const myListView({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: double.infinity,
child: Expanded(
child: ListView(
children: [
someListItem(),
someListItem(),
],
),
),
);
}
}
没有mediaquery,没有别的内容...
英文:
So what turned out to work, is this:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Column(
children: [
TopBar(),
Expanded( //The only change!!!!!!!!!!!!!!!!!
child: Row(
children: [
myListView(),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
), //I think this is the closing parentesis of the expanded...
],
),
),
),
);
}
class myListView extends StatelessWidget {
const myListView({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: double.infinity,
child: Expanded(
child: ListView(
children: [
someListItem(),
someListItem(),
],
),
),
);
}
}
no mediaquery, no nothing...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论