如何在扩展的 Flutter 列表中指定元素的宽度？答案

【问题标题】：How do I specify the width of elements within a Flutter list that is expanded?如何在扩展的 Flutter 列表中指定元素的宽度？
【发布时间】：2020-08-22 04:27:12
【问题描述】：

下面的代码表示一个项目列表，列表应该是全宽的，但列表中的元素可能不是。 Flutter 似乎忽略了我对SizedBox 的宽度限制，并强制它完全展开。

class ExampleBadListWidth extends StatelessWidget {
  List<String> things = [
    "1: This is a really really really really really really really  really really really  long thing",
    "2: This is a really really really really really really really  really really really  long thing",
    "3: This is a really really really really really really really  really really really  long thing"
  ];

  ExampleBadListWidth();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: [
      Expanded(
          child: ListView.builder(
        itemCount: things.length,
        itemBuilder: _thingBuilder,
      ))
    ]));
  }

  Widget _thingBuilder(context, index) {
    return SizedBox(width: 100, child: Text(things[index]));
  }
}

【问题讨论】：

标签： flutter flutter-listview

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以用Center 或Align 包裹SizedBox

代码sn-p

Widget _thingBuilder(context, index) {
    return Center(
      child: SizedBox(
          width: 100,
          child: Text(things[index])),
    );
  }

或

 Widget _thingBuilder(context, index) {
    return Align(
      alignment: Alignment.centerLeft,
      child: SizedBox(
          width: 100,
          child: Text(things[index])),
    );
  }

工作演示

完整代码

import 'package:flutter/material.dart';

class ExampleBadListWidth extends StatelessWidget {
  List<String> things = [
    "1: This is a really really really really really really really  really really really  long thing",
    "2: This is a really really really really really really really  really really really  long thing",
    "3: This is a really really really really really really really  really really really  long thing"
  ];

  ExampleBadListWidth();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: [
      Expanded(
          child: ListView.builder(
        itemCount: things.length,
        itemBuilder: _thingBuilder,
      ))
    ]));
  }

  Widget _thingBuilder(context, index) {
    return Align(
      alignment: Alignment.centerLeft,
      child: SizedBox(
          width: 100,
          child: Text(things[index])),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ExampleBadListWidth(),
    );
  }
}

【讨论】：