时间戳

首页 > 解决方案 > 如何在扩展的 Flutter 列表中指定元素的宽度？

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

问题描述

下面的代码表示一个项目列表，其中列表应该是全宽的，但列表中的元素可能不是。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]));
  }
}

标签： flutterflutter-listview

解决方案

您可以在下面复制粘贴运行完整代码您可以使用或
包装SizedBoxCenterAlign

代码片段

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(),
    );
  }
}

推荐阅读