Flutter 如何只給一個容器邊框底部

Question

在 Flutter 如何只為底部設置邊框，

如下圖所示，我有一個帶有文本的容器，從底部顯示紅色邊框，請指導如何僅從底部設置邊框。

Answer 1

將Border與bottom參數一起使用。

Container(
          decoration: BoxDecoration(
            Border(
              bottom: BorderSide(width: 1.5, color: Colors.grey[300]),
            ),
          ),
          child: ListTile(
            title: Text(title),
            subtitle: Text(score + dateFormatted),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
                 children: [
                    Text(amount),
                    Checkbox(
                       value: false,
                       activeColor: Colors.green,
                       onChanged: (bool newValue) {}),
                    ],
                   ),
           ),
);

Answer 2

最好使用ListView.separator構造函數

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: Home()));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(body: Demo());
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 42,
      separatorBuilder: (_, __) => Container(height: 1.5, color: Colors.grey[300]),
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('item $index'),
        );
      },
    );
  }
}